爱凉拌菜真是太好了

webpack css-modules 和global css 共存

发表于

在使用ant design 时候遇到ant design css 和自定义的css 冲突的问题。
./node_modules/ 中ant desing 的css 文件作为全局的css 和 自定义的css_modules 会发生冲突。解决办法是将/node_modules/中的css与自定义的css 分开处理。即对css_modules使用exclude:/node_modules/，对node_modules中的css使用include:path.resolve(__dirname,'node_modules')

最开始定义的webpack.config.js 的处理方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var webpack = require('webpack');
var path = require('path');
module.exports = {
  context: __dirname+'/src',
  entry: "./js/index.js",
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react','es2015'],
            // ant design  babel-plugin-import
            plugins: [['import',{'libraryName':'antd','style':'css'}]]
          }
        }
      },
      {
        test: /\.css$/,
        exclude: /(node_modules)/,
        use: [
          {loader:'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: true,
              loacalIdentName: '[name]__[local]_[hash:base64:5]',
              sourceMap: true,
              importLoaders: 1
            }
          }
        ]
      },  
    ]
  },
  output: {
    path: __dirname+'/src',
    filename: 'bundle.js'
  }
}

报错：

ERROR in ./node_modules/antd/lib/button/style/index.css
Module parse failed: /home/johnny/Project/react/demo3/node_modules/antd/lib/button/style/index.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

找到解决办法是，分别处理node_modules(ant design)中的css和css_modules：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var webpack = require('webpack');
var path = require('path');
module.exports = {
  context: __dirname+'/src',
  entry: "./js/index.js",
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react','es2015'],
            plugins: [['import',{'libraryName':'antd','style':'css'}]]
          }
        }
      },
      // css_modules 处理方式
      {
        test: /\.css$/,
        exclude: /(node_modules)/,
        use: [
          {loader:'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: true,
              loacalIdentName: '[name]__[local]_[hash:base64:5]',
              sourceMap: true,
              importLoaders: 1
            }
          }
        ]
      },
      // ant design 处理方式
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'node_modules'),
        use: [
          {loader:'style-loader'},
          {
            loader:'css-loader',
          }
        ]
      },
    ]
  },
  output: {
    path: __dirname+'/src',
    filename: 'bundle.js'
  }
}