0

React CSSモジュールをBootstrapで使いたいです。React with Bootstrap4でCantを使用する

まず、create-react-appコマンドでプロジェクトを作成しました。その後、私は私のapp.jsにNPMとブートストラップ4にインストールして、それを含めるように:

import 'bootstrap/dist/css/bootstrap.css'; 

私もWebPACKの設定ファイルへのアクセス権を持っているnpm ejectをしました。

はその間、私は私のlayout.jsファイルでCSSモジュールを使用していたので、私はwebpack.config.dev.jsに行って、trueにモジュールを変更:私は trueブートストラップCSSにモジュールを変更

test: /\.css$/, 
     use: [ 
      require.resolve('style-loader'), 
      { 
      loader: require.resolve('css-loader'), 
      options: { 
       modules: true  

      } 

正しく表示されません。モジュールをfalseに変更すると、ブートストラップが機能しています。何か案が?

Modules: true

Modules: false

答えて

0

ここで(例えばブートストラップ)他のグローバルCSSでCSS-モジュールを使用するためにどのように良い議論だ

https://github.com/css-modules/css-modules/pull/65

それがお役に立てば幸いです。

私は同じ問題があり、パブリックフォルダから直接index.htmlにブートストラップを直接ロードしました。私のプロジェクトは、同じバンドルにブートストラップを入れるほど大きくはない

P.S.

実際には、私もこのソリューションを試してみました。

{ 
    test: /^((?!\.global).)*\.css$/, // anything with .global will not 
go through css modules loader 
    loaders: [ 
    'style-loader', 
    'css-loader?modules&sourceMap&importLoaders=1&localIdentName= 
[name]__[local]___[hash:base64:5]', 
    'postcss-loader' 
    ] 
} 
を.global..cssとして https://github.com/css-modules/css-modules/issues/113

私はちょうど私のグローバルCSSファイルをすべて名前を変更します