基于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 相关文章推荐
div模拟选择框示例代码
Nov 03 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
javascript操作referer详细解析
Mar 10 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
Vue中render函数的使用方法
2018/01/31 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
宣传普通话标语
2014/06/27 职场文书
十佳党员事迹材料
2014/08/28 职场文书
流动人口婚育证明
2014/10/19 职场文书
英语辞职信怎么写
2015/02/28 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python