如何将CSS文件导入到Webpack中？

Question

根据文档，CSS 文件应该只需使用import导入。

我刚开始使用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文件夹的根目录后发现仍然存在同样的问题。

详细的错误显示CSS文件在nodes_module中寻找（通过整个目录树进行搜索）。为什么呢？那么如何相对于webpack.config.js的位置导入一个位于webpack/static/css/myfile.css的文件呢？

注意：使用require而不是import时仍然存在相同的问题。

- WoJ

Answer 1

您需要像任何JavaScript模块一样导入它们。这意味着，当导入的文件既不是相对路径（以../或./开头），也不是绝对路径（以/开头）时，它将被解析为模块。默认情况下，webpack将在node_modules目录中查找模块（在当前目录和所有父目录中）。这是与Node.js相同的行为。

要在webpack/entry.js中导入webpack/static/css/myfile.css，您必须使用相对路径。

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

如果你不想使用相对路径，你可以通过resolve.modules修改webpack查找模块的目录，或者使用resolve.alias来解决。

---

在webpack配置中，你定义了module.rules和module.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']
    }
  ]
}

- Michael Jungo

---

谢谢你的信息，Michael。我认为 webpack 真的很好，但是文档并不是十分出色，特别是对于那些不太精通 JS 的人来说。 - WoJ

@WoJ 我最近两天一直遇到同样的错误，无法解决这个问题。你能否回答一下我的问题：https://stackoverflow.com/questions/63396828/module-parse-failed-unexpected-token-10-you-may-need-an-appropriate-loader-t - Ali Raza

还有这一个 https://stackoverflow.com/questions/63449399/css-file-is-not-importing - Ali Raza

@AliRaza：我帮不上太多忙——已经转向使用更加不透明但更简单的框架（它们在内部使用webpack，但我看不到其中的魔法）。 - WoJ

Answer 2

@Aakash 试着在 css-loader 规则中添加 sideEffects: true，像这样：

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

看起来webpack把项目中的CSS文件当作死代码处理。 在cra配置中找到了这个解决方法。

- nctay

---

它可以工作，但是它具体做什么呢？你能否再解释一下？ - Abhinav Kumar

Answer 3

出于某种原因，对我来说什么都不起作用，所以我将css文件添加到了我的entry列表中：

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

- Aakash