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

更新時間：2018年07月31日 10:08:10 作者：林大元

這篇文章主要介紹了詳解使用create-react-app添加css modules、sasss和antd，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

create-react-app 是facebook的官方腳手架，對于個人開發(fā)者和中小型公司快速創(chuàng)建項目非常推薦。react的CSS解決方案有很多，這里我技術(shù)選型時用 css modules 和 sass ，然后配合antd使用通用組件庫。但是create-react-app原生并不支持 css modules 和 sass ，所以需要額外配置。

配置

增加css modules和sass

使用eject暴露配置

create-react-app 默認(rèn)是沒有暴露 webpack 配置的，所以需要eject一下。注意如果項目在git倉庫環(huán)境下，先提交代碼到git倉庫，否則會報錯

npm run eject

npm添加css modules和sass

npm install react-css-modules 
npm install sass-loader node-sass

這里安裝sass可能會遇到墻的問題報錯，所以要么使用cnpm或者使用本地代理設(shè)置，因為我有ss所以使用本地代理

// 開啟代理
npm config set proxy http://127.0.0.1:1080
// 安裝完sass后關(guān)閉代理
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 ，說明下這兩個文件，前一個是開發(fā)環(huán)境 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
     // 其實就是復(fù)制之前沒修改前的所有，再增加一個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"
   }
  ]
 ]
}

大功告成

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: