如何將CSS文件導入到webpack中？

Question

根據documentation，CSS文件應該只是import ed。

我剛開始用webpack並試圖導入CSS文件，但我得到了有關模塊的信息丟失：

D:\Dropbox\dev\jekyll\blog>webpack --display-error-details 
Hash: 0cabc1049cbcbdb8d134 
Version: webpack 2.6.1 
Time: 74ms 
    Asset  Size Chunks    Chunk Names 
build.js 2.84 kB  0 [emitted] main 
    [0] ./webpack/entry.js 47 bytes {0} [built] 

ERROR in ./webpack/entry.js 
Module not found: Error: Can't resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack' 
resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack' 
    Parsed request is a module 
    using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack) 
    Field 'browser' doesn't contain a valid alias configuration 
    after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack) 
    resolve as module 
     D:\Dropbox\dev\jekyll\blog\webpack\node_modules doesn't exist or is not a directory 
     D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory 
     D:\Dropbox\dev\node_modules doesn't exist or is not a directory 
     D:\Dropbox\node_modules doesn't exist or is not a directory 
     D:\node_modules doesn't exist or is not a directory 
     looking for modules in D:\Dropbox\dev\jekyll\blog\node_modules 
     using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules) 
      Field 'browser' doesn't contain a valid alias configuration 
     after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules) 
      using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules/navbar.css) 
      as directory 
       D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css doesn't exist 
      no extension 
       Field 'browser' doesn't contain a valid alias configuration 
       D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css doesn't exist 
      .js 
       Field 'browser' doesn't contain a valid alias configuration 
       D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.js doesn't exist 
      .json 
       Field 'browser' doesn't contain a valid alias configuration 
       D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.json doesn't exist 
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules] 
[D:\Dropbox\dev\jekyll\node_modules] 
[D:\Dropbox\dev\node_modules] 
[D:\Dropbox\node_modules] 
[D:\node_modules] 
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css] 
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css] 
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.js] 
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.json] 
@ ./webpack/entry.js 1:0-21 

webpack是撞上了以下webpack.config.js：

const path = require('path'); 

module.exports = { 
    entry: path.join(__dirname, 'webpack/entry.js'), 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'build.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     } 
    ], 
    rules: [{ 
      test: /\.css$/, 
      use: [ 'style-loader', 'css-loader' ] 
     }] 
    } 
} 

我最初認爲（在使用--display-error-details之前），這是由於路徑結構的某些問題（特別是向前或向後的斜槓），但隨後將navbar.css移動到根o f文件夾webpack - 同樣的問題。

詳細的錯誤表明，在nodes_module之後尋找CSS文件（這是通過所有目錄樹追捕的）。爲什麼？ 我應該如何導入webpack/static/css/myfile.css相對於webpack.config.js的位置的文件？

注：嘗試的require代替import

Answer 1

時，你必須輸入他們像任何JavaScript模塊存在同樣的問題。這意味着，當導入的文件既不是相對路徑（從../或./開始），也不是絕對路徑（從/開始）時，它將被解析爲模塊。默認情況下，webpack將查找node_modules目錄中的模塊（在當前目錄和所有父目錄中）。這與Node.js uses的行爲相同。

要導入webpack/static/css/myfile.css在webpack/entry.js您必須使用相對路徑。

import './static/css/myfile.css'; 

如果你不想使用相對路徑，您可以更改的WebPack用於查找與resolve.modules一個模塊的目錄，也可以使用resolve.alias。

---

在你的WebPack配置也都定義和module.rulesmodule.loaders。當webpack看到module.rules時，它完全忽略了module.loaders，所以不會使用您的babel-loader。您應該只使用module.rules。

module: { 
    rules: [ 
    { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'] 
    } 
    ] 
}