基于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 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 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
php中用文本文件做数据库的实现方法
2008/03/27 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
python的继承知识点总结
2018/12/10 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
大学老师推荐信
2014/02/25 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Java实现多线程聊天室
2021/06/26 Java/Android
html5调用摄像头截图功能
2022/01/18 Javascript