無法從 CSS 模塊轉換中跳過 3rd 方庫 CSS

Question

我第一次使用 React 和 Webpack 嘗試 CSS Modules，我遇到了至少三種實現它的方法：

1. css加載器
2. react-css-modules
3. babel-plugin-react-css-modules

我使用babel-plugin-react-css-modules來平衡代碼的簡單性和性能，除了一件事之外，一切似乎都運行良好：我的 3rd 方庫（Bootstrap 和 Font Awesome）也包含在 CSS Modules 轉換中。

<NavLink to="/about" styleName="navigation-button"></NavLink>

以上將正確轉換的className分配給NavLink 。 但是，內部的span需要引用全局樣式才能呈現圖標。

<span className="fa fa-info" />

上面的 span 沒有分配一個預期的轉換className ，但是我的捆綁樣式表沒有這些 CSS 類，因為它們被轉換成其他東西，以模擬本地范圍。

以下是我的.babelrc文件中用於激活babel-plugin-react-css-modules ：

{
  "presets": ["env", "react"],
  "plugins": [
    ["react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".less": {
          "syntax": "postcss-less"
        }
      }
    }]
  ]
}

在我的 Webpack 配置中，下面是為轉換配置css-loader的部分：

{
    test: /\.(less|css)$/,
    exclude: /node_modules/,
    use: extractCSS.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: {
                    minimize: true,
                    modules: true,
                    sourceMap: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            },
            {
                loader: 'less-loader'
            }
        ]
    })
}

據我所知，上面的規則應該排除庫樣式表，我還嘗試專門為排除的樣式表添加另一條規則，但這似乎不起作用，因為我猜這些樣式表仍然使用原始規則進行了轉換。

為了從兩個庫中導入 CSS，我在父樣式表中有以下兩行聲明了一些全局樣式：

@import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import '../../../node_modules/font-awesome/css/font-awesome.min.css';

Answer 1

我發現以下這兩種方法可能會有所幫助：

• https://stackoverflow.com/a/52294675
• https://github.com/css-modules/css-modules/pull/65#issuecomment-412050034

簡而言之，到目前為止，似乎沒有選項可以忽略/排除某些路徑被 css-modules webpack 插件模塊化。 理想情況下，插件應該支持它，但您可以嘗試以下一些方法：

使用兩個 webpack 規則來利用 webpack 規則排除/包含：

module.exports = {
  rules: [
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[path]__[local]___[hash:base64:5]',
          },
        },
      ],
    },
    {
      test: /\.css$/,
      include: /node_modules/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

...或者，從上面的第二個答案中注入 webpack 的 getLocalIdent以手動排除某些路徑。

const getLocalIdent = require('css-loader/lib/getLocalIdent');

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]',
    getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      return loaderContext.resourcePath.includes('semantic-ui-css') ?
        localName :
        getLocalIdent(loaderContext, localIdentName, localName, options);
    }
  }
}

Answer 2

對我來說，使用:global有效：

.my-component {
    :global {
        .external-ui-component {
           padding: 16px;
           // Some other styling adjustments here
        }
        ...
    }
}

Ps：要使用 webpack 配置來做，請參閱另一個答案。

來源

Answer 3

從play771更新解決方案

 {
    loader: 'css-loader',
    options: {
      modules: {
        auto: (resourcePath) => !resourcePath.includes('node_modules'),
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
 },