以.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: {
//當(dāng)scss文件里引入了其他scss樣式文件時溜哮，重新走前面兩個loader
importLoaders: 2,
//配置css是否按照模塊化打包，當(dāng)值為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 對應(yīng)的loader,在安裝了postcss-loader之后嗓奢，我們需要對該loader進(jìn)行單獨(dú)的配置。
-
新建一個文件夾為postcss.config.js
-
進(jìn)行如下配置浑厚，postcss-loader會按照該文件夾規(guī)則進(jìn)行打包
module.exports = {
plugins: [
require('autoprefixer')
]
}
樣式loader
-
style-loader: 將css代碼掛載到頁面上
-
css-loader: 識別css語法股耽，將多個css代碼編譯成一段css代碼
-
sass-loader: 識別scss/sass語法根盒，編譯成css語法
-
postcss-loader: 自動添加各瀏覽器兼容語法，添加瀏覽器前綴
