基于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 document.images实例
May 27 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
$.extend 的一个小问题
Jun 18 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
详解javascript replace高级用法
Feb 17 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
比较完整的微信开发php代码
2016/08/02 PHP
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue的安装及element组件的安装方法
2018/03/09 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
简单谈谈python基本数据类型
2018/09/26 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
英文请假条
2014/04/11 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
家长通知书家长意见
2014/12/30 职场文书
教师读书笔记
2015/06/29 职场文书
感恩教师主题班会
2015/08/12 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL