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


Posted in Javascript onMarch 13, 2018

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的配置方式详解

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

Javascript 相关文章推荐
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
js运动事件函数详解
Oct 21 Javascript
Javascript的this用法
Jan 16 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 #Javascript
vue加载自定义的js文件方法
Mar 13 #Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 #Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 #Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 #Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
简化php模板页面中分页代码的解析
2009/02/06 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python重要函数eval多种用法解析
2020/01/14 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
八年级英语教学反思
2014/01/09 职场文书
应届生找工作求职信
2014/06/24 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
碧霞祠导游词
2015/02/09 职场文书
2019年入党思想汇报
2019/03/25 职场文书
python某漫画app逆向
2021/03/31 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫