如何將CSS文件導入webpack？

Question

根據文檔，應該只import CSS 文件。

我剛從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移到了文件夾webpack的根目錄中 - 同樣的問題。

詳細錯誤顯示在 nodes_module 中查找nodes_module文件（通過所有目錄樹查找）。 為什么？ 然后我應該如何導入webpack/static/css/myfile.css相對於webpack.config.js位置的文件？

注意：嘗試require而不是import時存在同樣的問題

Answer 1

您必須像任何JavaScript模塊一樣導入它們。 這意味着，當導入的文件既不是相對路徑（以../或./開頭），也不是絕對路徑（以/開頭）時，它將被解析為模塊。 默認情況下，webpack將在node_modules目錄中查找模塊（在當前目錄和所有父目錄中）。 這與Node.js使用的行為相同。

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

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

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

---

在您的webpack配置中，您還定義了module.rules和module.loaders 。 當webpack看到module.rules它module.loaders完全忽略module.loaders ，因此不會使用你的babel-loader 。 你應該只使用module.rules 。

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

Answer 2

因為某些原因; 對我沒有任何作用，所以我將css文件添加到我的entry列表中：

// webpack.config.js
module.exports = {
  // ...
  entry: ["./src/style.css", "./src/index.js"]
  // ...
}

Answer 3

@Aakash 嘗試將 sideEffects: true 添加到 css-loader 規則，如下所示：

test: /\.css$/
sideEffects: true,
use: [...]

看起來 webpack 將項目 css 文件視為無效代碼。 在 cra config 找到了這個解決方法。