关闭

webpack配置sass模块的加载

时间: 2018-10-30阅读: 1446标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

node-sass是什么?

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

Sass 混合

混合指令(Mixin)用于定义可以重复使用的样式,避免了使用无语意的 class。它可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过功能引入变量,输出多样化的样式。

CSS预处理语言的模块化实践

编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋。对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目

让 JavaScript 与 CSS 和 Sass 对话

JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 Sass 变量。

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

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

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

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

为什么node-sass总是安装失败?

node-sass是我们开发中很常见的依赖包,也是安装时间冗长和最常见到报错的依赖。安装node-sass失败原因有很多种,我们在说失败原因之前,先来分析一下node-sass的安装过程

SASS简介及使用方法

Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

点击更多...

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