webpack配置sass模块的加载

时间: 2018-10-30阅读: 1746标签: Sass

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。

为了使用sass,我们需要安装sass的依赖包

//在项目下,运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install --save-dev node-sass


当然了,使用样式的话,css-loader和style-loader也是必须的依赖包,如果没有安装,可以类似上述的方法安装css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能;style-loader将所有的计算后的样式加入页面中;

二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。

 

下面是webpack.config.js文件的部分配置:

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
    ....
    module: {
        loaders: [
            //解析.css文件
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", 'css')
            },
            //解析.vue文件
            {
                test: /\.vue$/,
                loader: 'vue'
            }, 
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及<style lang="sass">...</style>声明的内部样式进行加载
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件,如果不想分离出来,可以直接这样写 loader:'style!css!sass'
            }
        ]
    },
    //.vue文件的配置,以下是为了在.vue文件中使用ES6语法(必须安装babel相关的依赖包),以及把使用css或sass语法的样式提取出来,如果不需要可以忽略
    vue: {
        loaders: {
            js: 'babel', 
            css: ExtractTextPlugin.extract("css"),
            sass: ExtractTextPlugin.extract("css!sass")            
        },
    },
    plugins: [
        new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
    ]
    ....
}


sass的使用如下,例如:

引入外部样式,下面两种写法都可以使用:

import '../../css/test.scss'
require('../../css/test2.scss');


在.vue文件中使用  

<style lang="sass">
     //sass语法样式
</style>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1213

Sass 颜色函数

本节我们来看一下 Sass 中的颜色函数,颜色函数可以分为三部分,分别是颜色设置、颜色获取以及颜色操作。Sass 中的颜色函数有很多,下面我们来看一些 Sass 中常用的颜色函数:

原生 CSS “杀死” 预处理器 Sass!

我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性

前端Vue框架在PostCSS怎样使用sass

众所周知转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置。将成为vw优先单位使用,以rem作为回退模式。考虑到vw在移动设备的支持度不如rem

Sass 嵌套

Sass 允许我们将以与html相同的方式嵌套css选择器,将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,比如:嵌套功能避免了重复输入父选择器

为何不推荐使用 Sass 作为 css 预处理器

Sass 是成熟、稳定、强大的专业级 CSS 扩展语言。它兼容 CSS、功能丰富、社区庞大,为业界认可,被广泛应用;本文将根据使用 Sass 存在的痛点,以及更好的替代品,来陈述个人观点:不推荐使用 scss 作为 css 预处理器,更倾向于使用 Less 或 Stylus。

Sass 导入

Sass 使 CSS代码保持DRY(也就是不要重复),编写代码的一种方式是将相关的代码保存在单独的文件中,我们可以创建带有CSS片段的小文件,以包含在其他Sass文件中,比如:重置文件、变量、颜色、字体或者是字体大小等等

如何使用SASS编写可重用的CSS?

Sass 是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的

Sass 循环语句

本节我们学习 Sass 中的循环语句,Sass 中的循环语句可以使用 @for 指令和 @while 指令来实现。@for 指令可以用于循环生成样式,@for 指令有两种类型

Sass 简介

Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复

node-sass是什么?

Node-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!