基于vue中css预加载使用sass的配置方式详解

npm install --save-dev sass-loader

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

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

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

<style lang="scss">

<template>  <div id="indexContent">    <v-header></v-header>    <div class="tab">      <div class="tab-item">        <!-- 使用 router-link 组件来导航. -->        <!-- 通过传入 `to` 属性指定链接. -->        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->        <router-link to="/foods">商品</router-link>      </div>      <div class="tab-item">        <router-link to="/rating">评论</router-link>      </div>      <div class="tab-item">        <router-link to="/seller">商家</router-link>      </div>    </div>    <!-- 路由出口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view>  </div></template><script type="text/ecmascript-6">  import header from './components/header/header.vue';  // 加default表示对整个模块进行导出  export default{    components: {      'v-header': header    }  };</script><span style="color:#cc0000;"><style lang="scss"></span>  #indexContent {    .tab{      display: flex;      width:100%;      height: 40px;      line-height: 40px;      .tab-item {        flex: 1;        text-align: center;        a{          display:block;        }      }    }  }</style>