自己搭建的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$/,
    use: [
        "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中加入