create-react-app配置css moudles 和 scss 并防止和antd样式冲突

发表于 | 分类于 | 阅读次数:
字数统计: 947 | 阅读时长 ≈ 4

背景

我们在使用 react 来开发的时候，用的是它的组件化开发的思想，在封装组件的时候，样式的书写方式和引入也是我们在开发中需要考虑的问题。这里简单记录下自己使用 css moudles 和解决与 antd 的样式发生冲突的过程

配置 css modules 和 sass 并且解决样式冲突

因为 create-react-app 内置支持 css modules，所以只需开启下就好，先配置下 sass：

1
yarn add sass-loader node-sass --dev

我们需要给 webpack 配置上 css-modules 和 sass-loader。但是使用 css-modules 会使 node_modules 库里的 css 样式找不到，比如后面要使用到的 antd，这个时候我们需要 inclube 来排除影响 node_modules，使得 css-modules 不会影响到 node_modules。

修改项目中 config 目录下的 webpack.config.dev.js 和 webpack.config.prod.js，说明下这两个文件，前一个是开发环境 npm start 使用，后一个是 npm run build 打包后使用。

  • 修改 webpack.config.dev.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
{
            //这里增加SCSS的支持,两种方式用一种就可以
            // test: /.(css|scss)$/
            test: [/\.css$/, /\.scss$/],
            exclude: [/node_modules/],// 这里去排除node_modules，防止css modules影响到node_modules
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true, // 这里增加对css modules的支持
                  localIdentName: '[name]__[local]__[hash:base64:5]' //这里增加对css modules的支持
                },
              },
              {
                loader: require.resolve('sass-loader'), // 这里增加sass的支持
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },
          // 因为上面排除了css_modules所以这里一定要再添加个排除src来识别css_modules
          // 其实就是复制之前没修改前的所有，再增加一个exclude: [/src/]
          {
            test: /\.css$/,
            exclude: [/src/], // 这里添加排除src，
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          }
  • webpack.config.prod.js 文件修改方式与 webpack.config.dev.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
{
           //这里增加SCSS的支持,两种方式用一种就可以
           // test: /.(css|scss)$/
           test: [/\.css$/, /\.scss$/],
           exclude: [/node_modules/], // 这里去排除node_modules
           loader: ExtractTextPlugin.extract(
             Object.assign(
               {
                 fallback: {
                   loader: require.resolve('style-loader'),
                   options: {
                     hmr: false,
                   },
                 },
                 use: [
                   {
                     loader: require.resolve('css-loader'),
                     options: {
                       importLoaders: 1,
                       minimize: true,
                       sourceMap: true,
                       modules: true, // 这里添加css modules支持
                     },
                   },
                   {
                     loader: require.resolve('postcss-loader'),
                     options: {
                       // Necessary for external CSS imports to work
                       // https://github.com/facebookincubator/create-react-app/issues/2677
                       ident: 'postcss',
                       plugins: () => [
                         require('postcss-flexbugs-fixes'),
                         autoprefixer({
                           browsers: [
                             '>1%',
                             'last 4 versions',
                             'Firefox ESR',
                             'not ie < 9', // React doesn't support IE8 anyway
                           ],
                           flexbox: 'no-2009',
                         }),
                       ],
                     },
                   },
                   {
                     loader: require.resolve('sass-loader'), // 这里添加sass支持
                   }
                 ],
               },

               extractTextPluginOptions
             )
           ),
           // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
         },
         {
           test: /\.css$/,
           exclude: [/src/], // 排除src
           loader: ExtractTextPlugin.extract(
             Object.assign(
               {
                 fallback: {
                   loader: require.resolve('style-loader'),
                   options: {
                     hmr: false,
                   },
                 },
                 use: [
                   {
                     loader: require.resolve('css-loader'),
                     options: {
                       importLoaders: 1,
                       minimize: true,
                       sourceMap: true,
                     },
                   },
                   {
                     loader: require.resolve('postcss-loader'),
                     options: {
                       // Necessary for external CSS imports to work
                       // https://github.com/facebookincubator/create-react-app/issues/2677
                       ident: 'postcss',
                       plugins: () => [
                         require('postcss-flexbugs-fixes'),
                         autoprefixer({
                           browsers: [
                             '>1%',
                             'last 4 versions',
                             'Firefox ESR',
                             'not ie < 9', // React doesn't support IE8 anyway
                           ],
                           flexbox: 'no-2009',
                         }),
                       ],
                     },
                   }
                 ],
               },

               extractTextPluginOptions
             )
           ),
           // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
         }
-------------本文结束感谢您的阅读-------------

本文标题:create-react-app配置css moudles 和 scss 并防止和antd样式冲突

文章作者:Water

发布时间:2018年07月30日 - 11:07

最后更新:2023年08月01日 - 06:08

原始链接:https://water.buging.cn/2018/07/30/create-react-app配置css-moudles-和-scss-并防止和antd样式冲突/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多