自己搭建的react項目引入scss或css

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文件就會單獨打包出來了