自己搭建的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文件就会单独打包出来了