2020-05-10 | React

react中使用css modules导致antd样式失效

最近手动封装react，在配置webpack.config.js文件时遇到了一个很大的问题：当我配置好局部css样式时，然后我又引入antd的样式导致antd的样式不生效的一个问题。首先需要声明的一点是：我已经在index.js中引入antd的样式，即：import 'antd/dist/antd.css'，所以这个时候并不是没有引入antd的css样式导致样式不生效的问题。
接着我便在谷歌上查找了很久也没有找到相关的问题，经过不断的思考和尝试最终找到了一个比较合理的解决方案，先说一说重要的思路：由于我们下载的antd文件它是在我们的node_modules文件夹下，因此我们可以考虑到在antd（node_modules）目录下不开启局部css样式，在非antd（非node_modules）目录下开启局部css样式。

注意：在这里我默认你会yarn命令，如果你没有安装yarn可以去官网安装

有了这个思路之后我们接下来就来实行相关的操作，首先我们需要在终端执行下载相关的插件指令：yarn add style-loader css-loader，下载完之后在我们的webpack.config.js文件中配置下面相关的重要代码部分：

module.exports = {
	module: {  // 所有第三方模块的配置规则
	 rules: [
      {
        test: /\.css$/,
        include: [/node_modules/], // antd(node_modules文件)目录
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.css$/,
        exclude: [/node_modules/],  // 非antd(非node_modules文件)目录开启css modules 
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'local',
                localIdentName: "[name]__[local]___[hash:base64:5]",
              }
            }
          },
        ],
      }]
	}
}

这个时候我再给大家补充一个我们在工作中常见的一个关于webpack的配置问题，就是给我们的文件夹取别名，常见的就是将src文件改为@，这样的好处就是我们在粘贴文件路径的时候，它不会出现对于不同文件中显示相同路径时会报路径错误的问题，以为它这样的写法是一个绝对路径的写法，下面就看看在webpack.config.js文件具体的配置：

// path是系统模块，直接引入即可使用，不需要安装也不需要自己写
const path = require('path')
module.exports = {
	resolve: {
	// 表示这几个文件的后缀名可以省略不写，默认是js、json
    extensions: ['.js', '.jsx', '.json'],
    alias: { // 别名
      '@': path.join(__dirname, './src')
    }
  }
}

接下来再顺便给大家补充一下自己搭建react脚手架的时候，一些常用的配置，首先我们需要下载三方插件：webpack-dev-server(它是一个开启服务器的，相当于一个测试的服务器，需要注意它没有真实的输出文件，而是把它放到内存里面了，避免占用磁盘空间)、html-webpack-plugin(会生成index.html，然后把js和css文件自动插入进去，然后帮我们把页面存在内存中)，因此我们先在终端执行下载指令：yarn add html-webpack-plugin webpack-dev-server，然后在webpack.config.js文件中进行相关的配置，在这里我将上诉的所有内容都配置在一起，这里是一个较为简单完整的配置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'development',  // 如果没有设置，webpack会将mode的默认值设置为production
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),  // 源文件
      filename: 'index.html'  // 生成内存中首页的名称
    })
  ],
  module: {  // 所有第三方模块的配置规则
    rules: [
      {
        test: /\.js|jsx$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        include: [/node_modules/], // antd(node_modules文件)目录
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.css$/,
        exclude: [/node_modules/],  // 非antd(非node_modules文件)目录开启css modules 
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'local',
                localIdentName: "[name]__[local]___[hash:base64:5]",
              }
            }
          },
        ],
      }]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'], // 表示这几个文件的后缀名可以省略不写，默认是js、json
    alias: {
      '@': path.join(__dirname, './src')
    }
  }
}

接着我们可以在package.json文件中配置(如果你没有package.json文件，那么你可以在终端中执行yarn init -y或者你想对package.json文件进行相关的配置，你可以执行指令yarn init然后填写你想写的内容，再回车一直重复直到完成)：

{
	"scripts": {
    "dev": "webpack-dev-server --open --port 3000 --host 127.0.0.1"
     },
}

在这里解释一下脚本命令的意思：–open表示自动打开浏览器，如果你想打开指定的浏览器就在open后面空一格进行一个配置即可；–port 3000表示浏览器端口号是3000，你也可以指定你想要的端口号；–host 127.0.0.1表示浏览器的地址是127.0.0.1，如果不配置默认是localhost。

最后需要注意的一点是：每一次你修改了webpack的配置文件之后，需要重新启动一下终端。