使用create-react-app添加css modules、sasss和antd

前言

create-react-app是facebook的官方腳手架，對於我的開發者和中小型公司快速建立項目很是推薦。react的CSS解決方案有不少，這裏我技術選型時用css modules和sass，而後配合antd使用通用組件庫。可是create-react-app原生並不支持css modules和sass，因此須要額外配置。

配置

增長css modules和sass

使用eject暴露配置

create-react-app默認是沒有暴露webpack配置的，因此須要eject一下。注意若是項目在git倉庫環境下，先提交代碼到git倉庫，不然會報錯

npm run eject
複製代碼

npm添加css modules和sass

npm install react-css-modules 
npm install sass-loader node-sass
複製代碼

這裏安裝sass可能會遇到牆的問題報錯，因此要麼使用cnpm或者使用本地代理設置，由於我有ss因此使用本地代理

// 開啓代理
npm config set proxy http://127.0.0.1:1080
// 安裝完sass後關閉代理
npm config delete proxy
複製代碼

webpack配置

重點來了，咱們須要給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:

大約在160行左右，找到test: /\.css$/，中文註釋的地方就是修改和增長的地方

{
            test: [/\.css$/, /\.scss$/],// 這裏增長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相似

{
            test: [/\.css$/, /\.scss$/], // 這裏增長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`.
          }
複製代碼

安裝antd和配置

主要是安裝配置antd和babel-plugin-import，這樣可使得antd按需加載樣式

npm添加antd和babel-plugin-import

npm install antd
npm install babel-plugin-import
複製代碼

配置babel

在項目根目錄下增長.babelrc文件，而後配置以下

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}
複製代碼

大功告成