基于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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 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
JS实现的省份级联实例代码
2013/06/24 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
喷漆工的岗位职责
2014/03/17 职场文书
求职信格式要求
2014/05/23 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
平安家庭事迹材料
2014/12/20 职场文书
家长会主持词开场白
2015/05/29 职场文书
飞屋环游记观后感
2015/06/08 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
话题作文之呼唤
2019/12/18 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android