下面小编就为大家分享一篇基于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>// 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>{
      test: /\.sass$/,
      loaders: ['style', 'css', 'sass']
    }</span><span>
  ]
 },</span>

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

<style lang="scss">
<template>
  <div id="indexContent">
    <v-header></v-header>
    <div>
      <div>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foods">商品</router-link>
      </div>
      <div>
        <router-link to="/rating">评论</router-link>
      </div>
      <div>
        <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 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的配置方式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

    无相关信息
最新资讯
苹果拒绝印度监管机构在iPhone中预装软件

苹果拒绝印度监管机构

苹果公司以可能存在隐私风险为由拒绝的这种预装软件的
赛灵思收购深鉴科技:中国AI芯片产业难改依附式生存

赛灵思收购深鉴科技:中

全球最大的可编程芯片(FPGA)厂商赛灵思宣布收购中国 AI
热销两年的AirPods背后,是苹果对阵安卓的杀手锏

热销两年的AirPods背

AirPods成功的背后,反映出了苹果在对阵安卓时,能够发挥
印度“失去”苹果 市场真的在滑向低端吗?

印度“失去”苹果 市

我们看印度市场的变化,不能只看表面,要看三年后、五年后
冯鑫的危机和转机

冯鑫的危机和转机

作为一名把企业做到IPO、并且在股市上创造了连续涨停
上市破发启示录:2018年互联网公司能从泡沫时代学到什么?

上市破发启示录:2018年

读史可以知兴替,为此翻出了早已落灰的旧资料,在2000年那
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形