基于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\'] 
} 

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

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

4.npm run dev

5.效果

以上这篇基于vue中css预加载使用sass的配置方式详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。