webpack 编译sass异常
来源:互联网 发布:qt编程入门 书籍 编辑:程序博客网 时间:2024/06/10 03:07
现在前端大部分没有直接编辑css样式,而是通过使用第三方提供的编辑,提高开发效率,如sass与less,为了便捷会引入postcss来帮编译的样式自行加入相应的细节兼容浏览器,如下所示:
{ display: flex }
编译为
{ display: webkit-box; display: webkit-flex; display: ms-flexbox; display: flex;}
这样就可以方便开发
现在说sass与postcss一起使用的情况,在webpack中会用sass-loader与postcss来编译,顺便要写好,postcss一定要保证在sass之前,否则就只能兼容部分sass语法,且编译会报错,如 #{$}识别不了该词
$name: foo;p.#{$name} { color: #ddd; }
编译报错, ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/lib!./…../..scss
(…) Unknow word
name: foo;
p.#{name} { color: #ddd; }
所以相应的webpack-module中的scss模块调整为如下:
{
test: /.scss$/,
use: [ ‘style-loader’, ‘css-loader’, ‘postcss-loader’, ‘sass-loader’ ]
}
(对应的webpack版本为3)
阅读全文
0 0
- webpack 编译sass异常
- webpack+vue2.0+手动添加sass的编译模板
- webpack---编译sass并分割css为独立文件,通过extract-text-webpack-plugin分割文件
- vue+webpack+es6+sass
- SASS编译
- Sass编译
- vue-cli webpack 使用sass
- SASS安装 SASS编译 SASS基础语法
- webpack里怎么配置Sass,非常实用!!!
- webpack-sass-postcss-loader-单个css文件
- 在vue+webpack中使用sass
- SASS--安装、用法、编译
- sass编译方式
- Less/Sass编译工具
- Sass的编译环境
- 使用gulp编译sass
- sass的编译
- SASS的编译
- PTA C实验5 7-7 计算天数
- nginx负载均衡策略
- 全能电子地图下载器 破解版 亲测可用
- webservice XML实体注入漏洞解决方案
- C++11新特性学习笔记—long long
- webpack 编译sass异常
- SSM项目中怎么去一个时间段
- react 小结
- 火柴排队(蜜汁tle)
- 自定义构建配置
- Swift 100个入门实例程序之00-05
- Kotlin的互操作——Kotlin与Java互相调用
- JDK7与JDK8环境共存与切换
- androdistudio之mvvm初级adapter详解