react、webpack、bebal7搭建項目參考我的上一篇博客
https://blog.csdn.net/qq_39501040/article/details/102921945
在搭建完成react項目後,在開發過程中引入css或scss時出現報錯,無法解析css或scss文件內容
解決方法如下:
npm install --save-dev css-loader style-loader node-sass sass-loader
安裝這些依賴的目的是爲了webpack打包時能將css進行打包
安裝過後需要修改webpack.config.js,在module下的rules中加入以下內容
{
test: /\.s?css$/,
loader: 'style-loader!css-loader!sass-loader'
}
這種情況下,在運行時就可以解析css文件了
但是。。。這時css文件的內容時在html頁面的head標籤下的<style>標籤中,如果還想在打包時將css文件單獨打包出來,需要以下操作
npm install --save-dev mini-css-extract-plugin
然後修改webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
在module下的rules中加入以下內容
{
test: /\.s?css$/,
use: [
// "style-loader", // 不再需要style-loader已經分離處理
MiniCssExtractPlugin.loader,
"css-loader", // 編譯css
"sass-loader" // 編譯scss
]
}
在module下的plugins中加入以下內容
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
這時打包的時候,css文件就會單獨打包出來了