react-css-loader

问题

在 create-react-app 开发过程中，出现 css全局污染。

解决

webpack 处理过程中的 css-loader 可以解决全局污染问题。

原理是最终页面渲染的类名变为自定义字符串 的形式。

开启css-loader

以 webpack.config.dev.js 说明 , webpack.config.prod.js 也需要改。

loader: require.resolve('css-loader'),
options: {
  importLoaders: 1,
  modules: true, //新增，开启css-loader
  localIdentName: '[name]__[local]__[hash:base64:5]', //新增规则
},

页面所有样式失去效果，不要着急

注意事项：

将 import 进来的 ./SomeComponent.css 分配给一个本地常量.
在 JSX 中将 className 替换成的形式 {styles.myClass}.
需要修改 CSS 文件和 JSX 中的 class 名。因为 CSS Modules 不允许”-“出现在类名中。

关于ant-design冲突解决

按照上述改完之后，发现 ant-design 样式全部失效.

antd 和 css modules 不能混用，针对 antd 的 css 单独写一条 loader 的规则, 不开启 css modules

{
  test: /\.css$/,
  exclude: /node_modules|antd\.css/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]__[hash:base64:5]',
        },
      },
              
  ],
},
{
  test: /\.css$/,
  include: /node_modules|antd\.css/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
          importLoaders: 1
        },
      },
              
  ],
},

CSS作用域相关

CSS Modules 允许使用 :global(.className) 的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。
CSS Modules 还提供一种显式的局部作用域语法 :local(.className)，等同于 .className.
适用于解决对标签定义样式的问题，标签写样式，不经过 localIdentName 造成全局污染。修改为：
1
2
3
4
5
:local(.a){
tbody tr td {
text-align: center;
}
}

ant-design实现按需加载

{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
     plugins: [ //按需加载
       ['import', { libraryName: 'antd', style: 'css' }]
     ],
     // This is a feature of `babel-loader` for webpack (not Babel itself).
     // It enables caching results in ./node_modules/.cache/babel-loader/
     // directory for faster rebuilds.
     cacheDirectory: true,

  },
},