vue中css预加载使用sass的配置方式

1.安装sass的依赖包

npm install --save-dev sass-loader

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

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置，如下红色部分

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

// 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]')
        }
      },
        {
            test: /\.sass$/,
            loaders: ['style', 'css', 'sass']
        }
    ]
  },

3.修改模板里面的style lang="scss";例如模板红色标记

<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>

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

4.npm run dev

5.效果