基于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 相关文章推荐
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
webpack打包多页面的方法
Nov 30 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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邮件类
2007/01/03 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
json跨域调用python的方法详解
2017/01/11 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python写程序统计词频的方法
2019/07/29 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
建筑人员岗位职责
2013/12/25 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
美德好少年主要事迹
2014/01/29 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android