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

时间 2019-11-16

标签使用 create react app 添加 css modules sasss antd 栏目 React 繁體版

原文原文链接

前言

create-react-app是facebook的官方脚手架，对于我的开发者和中小型公司快速建立项目很是推荐。react的CSS解决方案有不少，这里我技术选型时用css modules和sass，而后配合antd使用通用组件库。可是create-react-app原生并不支持css modules和sass，因此须要额外配置。css

配置

增长css modules和sass

使用eject暴露配置

create-react-app默认是没有暴露webpack配置的，因此须要eject一下。注意若是项目在git仓库环境下，先提交代码到git仓库，不然会报错node

npm run eject
复制代码

npm添加css modules和sass

npm install react-css-modules 
npm install sass-loader node-sass
复制代码

这里安装sass可能会遇到墙的问题报错，因此要么使用cnpm或者使用本地代理设置，由于我有ss因此使用本地代理react

// 开启代理
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_moduleswebpack

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

修改webpack.config.dev.js:

大约在160行左右，找到test: /\.css$/，中文注释的地方就是修改和增长的地方github

{
            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相似web

{
            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

npm添加antd和babel-plugin-import

npm install antd
npm install babel-plugin-import
复制代码

配置babel

在项目根目录下增长.babelrc文件，而后配置以下sass

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}
复制代码

大功告成babel