我在我的項目中使用了webpack 2和react-bootstrap;我無法找到如何正確應用引導程序CSS樣式，似乎.css文件未加載，無論我嘗試使用哪個import語句。webpack2：如何導入Bootstrap CSS用於react-bootstrap以查找其樣式？

據我所知，我不需要完整的引導包與JavaScript等，因爲我使用react-bootstrap;我只需要CSS。所以，我在main.js文件添加此：

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

看來工作（沒有錯誤消息），但不應用的樣式......

我配置我的WebPack配置文件中的CSS加載器描述在webpack 2文檔上。

任何幫助，將不勝感激:)

來源

2017-02-24 mguijarr

你在'css-loader'中設置了選項'modules：true'嗎？這將使css在本地範圍內。如果你發佈你的webpack配置會很好，文檔中有很多不同的配置。 –

@MichaelJungo非常感謝！就是這樣:)我從webpack2網頁複製了配置文件，確實有'modules：true' ...很高興知道我是否可以決定是否希望將CSS規則作用於模塊中，而不是使用全局選項？ – mguijarr

@MichaelJungo如果您發送一個，我會很樂意回覆您的答案:) – mguijarr

當css-loader設置modules: true，CSS的本地默認作用域，但你需要他們在全球上市。最簡單的解決方案是完全刪除modules: true。您仍可以使用:local在自己的CSS文件中使用模塊。

但是，如果你想使用模塊，有一些變通辦法來導入全局。

定義單獨的規則

反而使模塊爲所有的CSS文件，可以使兩個不同的規則，匹配所需的文件的。因此，假設所有從node_modules導入的CSS應該被視爲常規（全局）CSS。規則是這樣的：

{ 
    // For all .css files except from node_modules 
    test: /\.css$/, 
    exclude: /node_modules/, 
    use: [ 
    'style-loader', 
    { loader: 'css-loader', options: { modules: true } } 
    ] 
}, 
{ 
    // For all .css files in node_modules 
    test: /\.css$/, 
    include: /node_modules/, 
    use: ['style-loader', 'css-loader'] 
}

當然，你可以在你想要包含/排除，如果您不希望整個node_modules做什麼更具體。

指定裝載機內嵌

您可以指定在import的裝載機的WebPack會使用那些在配置的。您可以按如下方式導入引導：

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';

這僅僅是一個快速的解決方法，而無需更改任何配置，但有多個這樣的情況下，特別是當它可能是不可取的。

來源

2017-02-24 13:51:34

非常感謝您的詳細解釋 – mguijarr

webpack2：如何導入Bootstrap CSS用於react-bootstrap以查找其樣式？

回答

定義單獨的規則

指定裝載機內嵌

相關問題