快捷導(dǎo)航

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

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

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

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

配置

增加css modules和sass

使用eject暴露配置

create-react-app 默認(rèn)是沒(méi)有暴露 webpack 配置的，所以需要eject一下。注意如果項(xiàng)目在git倉(cāng)庫(kù)環(huán)境下，先提交代碼到git倉(cāng)庫(kù)，否則會(huì)報(bào)錯(cuò)

npm run eject

npm添加css modules和sass

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

這里安裝sass可能會(huì)遇到墻的問(wèn)題報(bào)錯(cuò)，所以要么使用cnpm或者使用本地代理設(shè)置，因?yàn)槲矣衧s所以使用本地代理

// 開啟代理
npm config set proxy http://127.0.0.1:1080
// 安裝完sass后關(guān)閉代理
npm config delete proxy

webpack配置

重點(diǎn)來(lái)了，我們需要給 webpack 配置上 css-modules 和 sass-loader 。但是使用 css-modules 會(huì)使 node_modules 庫(kù)里的css樣式找不到，比如后面要使用到的antd，這個(gè)時(shí)候我們需要inclube來(lái)排除影響 node_modules ，使得 css-modules 不會(huì)影響到 node_modules

修改項(xiàng)目中 config 目錄下的 webpack.config.dev.js 和 webpack.config.prod.js ，說(shuō)明下這兩個(gè)文件，前一個(gè)是開發(fā)環(huán)境 npm start 使用，后一個(gè)是 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, // 這里增加對(duì)css modules的支持
         localIdentName: '[name]__[local]__[hash:base64:5]' //這里增加對(duì)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',
          }),
         ],
        },
       },
      ],
     },
     // 因?yàn)樯厦媾懦薱ss_modules所以這里一定要再添加個(gè)排除src來(lái)識(shí)別css_modules
     // 其實(shí)就是復(fù)制之前沒(méi)修改前的所有，再增加一個(gè)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

在項(xiàng)目根目錄下增加 .babelrc 文件，然后配置如下

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

大功告成

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

您可能感興趣的文章: