web-dev-qa-db-ja.com

CSSモジュールが有効になっているときにbootstrapファイルを除外する方法

プロジェクトでcss-loaderのモジュールオプションを有効にして、bootstrapとCSSモジュールの両方を使用していますが、残念ながらcss-loaderはbootstrap =ファイルも。

すべてのbootstrap sassファイルをインポートするapp.scssがあります。app.scssファイルをapp.jsファイルにインポートします。

import "./app.scss";

  { test: /\.scss$/,
    use: [
        {loader: "style-loader"},
        {
          loader: "css-loader",
          options: {
            sourceMap: true,
            modules: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]"
          }
        },
        {loader: "sass-loader"}
      ]

たとえば、ブートストラップの.tableクラスは.app__table--19A_zのようなものに変わります

bootstrapファイルのCSSモジュールを無効にするにはどうすればよいと思いますか？.

webpackbootstrap-4css-loader
8
bigfanjs

bootstrap scssファイルを単一のエントリポイントでアプリのscssファイルにインポートしているため、これはexcludeだけでは実現できません。

また、：globalセレクタースコープを使用して完全に実行することもできませんが、特にpostcssを使用していない場合は、これで確実に作業を行うことができます。

このトピックに関する進行中のディスカッションを表示するには、このgithubの問題を表示してください： https://github.com/css-modules/css-modules/pull/65

1
Drew2

module rule.exclude で実現できます

条件が一致してはなりません。慣例では、ここで文字列または文字列の配列を提供しますが、強制されません。

したがって、boostrapscssファイルを除外するには次のようにする必要があります。

{
  test: /\.scss$/,
  use: ...
  exclude: [
    path.resolve(__dirname, "node_modules/bootstrap"),
  ]
}
1
Adi Prasetyo