Detaillierte Erläuterung der Konfigurationsmethode mit Sass basierend auf dem Vorladen von CSS in Vue

Im Folgenden werde ich Ihnen eine detaillierte Erklärung der Konfigurationsmethode zur Verwendung von Sass basierend auf dem CSS-Vorladen in Vue geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

1. Sass-Abhängigkeitspaket installieren

npm install --save-dev sass-loader

//sass-loader依赖于node-sass
npm install --save-dev node-sass

2. Fügen Sie die Konfiguration in den Regeln von webpack.base.conf.js unter dem Build-Ordner hinzu, wie im roten Teil unten gezeigt

{ 
 test: /\.sass$/, 
 loaders: ['style', 'css', 'sass'] 
}

<span style="color:#454545;">// module用来解析不同的模块
 module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    // 也就是说，对.js和.vue文件在编译之前进行检测，检查有没有语法错误&#39;eslint-loader&#39;
    // enforce: &#39;pre&#39;选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
    // 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
    loader: &#39;vue-loader&#39;,
    // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    // 对js文件使用babel-loader转码,该插件是用来解析es6等代码
    loader: &#39;babel-loader&#39;,
    // 指明src和test目录下的js文件要使用该loader
    include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    // 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL
    // 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的
    // DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？
    loader: &#39;url-loader&#39;,
    options: {
     // 限制 10000 个字节一下的图片才使用DataURL
     limit: 10000,
     name: utils.assetsPath(&#39;img/[name].[hash:7].[ext]&#39;)
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    // 字体文件处理，和上面一样
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;media/[name].[hash:7].[ext]&#39;)
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;fonts/[name].[hash:7].[ext]&#39;)
    }
   },
    </span><span style="color:#ff0000;">{
      test: /\.sass$/,
      loaders: [&#39;style&#39;, &#39;css&#39;, &#39;sass&#39;]
    }</span><span style="color:#454545;">
  ]
 },</span>

3. Ändern Sie den Stil lang="scss" in der Vorlage; Die Vorlage ist beispielsweise rot. Tags

<style lang="scss">

<style lang="scss">
  #indexContent {
    .tab{
      display: flex;
      width:100%;
      height: 40px;
      line-height: 40px;
      .tab-item {
        flex: 1;
        text-align: center;
        a{
          display:block;
        }
      }
    }
  }

4.npm run dev

5. Effekte

Die Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Die Verwendung von el-Ausdrücken in js und die nicht leere Beurteilungsmethode

JS implementiert links Listenbewegung Gehe zur rechten Listenfunktion

Die Methode zur Verwendung des EL-Ausdrucks, um den Kontextparameterwert in JS zu erhalten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Konfigurationsmethode mit Sass basierend auf dem Vorladen von CSS in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!