在avatar.scss中使用css3属性,打包以后为什么没有添加厂商类名呢?请老师解惑。

来源:3-4 使用 Loader 打包静态资源(样式篇 - 下)

郭二蛋

2019-02-21

// avatar.scss 如下图
图片描述
// index.scss如下图
图片描述
webpack.config.js配置文件如下图
图片描述
打包完成以后avatar.scss中的类名在浏览器中的显示如下图
图片描述

由上图可见 并没有添加厂商前缀,当我使用index.scss中的类名时,却添加上了厂商前缀,如下图
图片描述

// index.js 如下图
图片描述

还请老师在百忙之中能够为学生解惑,谢谢!

写回答

3回答

慕勒1632382

2019-02-22

loader顺序问题,把sass-loader和postcss-loader调换顺序。调整为如下顺序:

use: ['style-loader',

{

loader: 'css-loader',

options: {

importLoaders: 2 // The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources. 1只跑potcss-loader,2跑postcss-loader和sass-loader

// modules: true // 启用CSS Modules

}

},

'postcss-loader',

'sass-loader']

我的理解为postcss-loader是后处理器,应该要放在任何预处理器的后面处理CSS

0
1
郭二蛋
非常感谢!加深了对Loader的理解,我也是昨天下午看到loader的加载顺序
2019-02-23
共1条回复

慕粉3324955

2019-02-22

在css-loader中配置modules: true

0
0

Dell

2019-02-21

jia58960 同学的答案正确,调整下loader顺序,再实验下即可。

0
2
郭二蛋
实验通过,谢谢老师 谢谢Jia58960同学的帮助。
2019-02-23
共2条回复

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程