以.scss为例
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [
//将css代码挂载到页面上
'style-loader',
//识别css语法，将多个css代码编译成一段css代码
{
loader: 'css-loader',
options: {
//当scss文件里引入了其他scss样式文件时，重新走前面两个loader
importLoaders: 2,
//配置css是否按照模块化打包，当值为true时，想要css生效需要使用该语法
//import style from "./../.."
//<div className={style.className}></div>
modules: true,
}
},
//识别scss/sass语法，编译成css语法
'sass-loader',
//自动添加各浏览器兼容语法，添加浏览器前缀
'postcss-loader'
]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
在使用前需要npm install 对应的loader,在安装了postcss-loader之后，我们需要对该loader进行单独的配置。
-
新建一个文件夹为postcss.config.js
-
进行如下配置，postcss-loader会按照该文件夹规则进行打包
module.exports = {
plugins: [
require('autoprefixer')
]
}
样式loader
-
style-loader: 将css代码挂载到页面上
-
css-loader: 识别css语法，将多个css代码编译成一段css代码
-
sass-loader: 识别scss/sass语法，编译成css语法
-
postcss-loader: 自动添加各浏览器兼容语法，添加浏览器前缀
