如何将 CSS 文件导入 webpack？

Posted 2023-02-22

【中文标题】如何将 CSS 文件导入 webpack？

【英文标题】：How to import CSS files into webpack?

【发布时间】：2017-11-12 10:57:56

【问题描述】：

根据documentation，CSS 文件应该只是imported。

我刚从 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 时存在同样的问题

【参考方案1】：

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

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

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']
    
  ]

【讨论】：

感谢迈克尔提供这两个信息。我认为webpack 非常好，但文档并不特别——尤其是对于不精通 JS 的人。

@WoJ 我在过去 2 天里遇到同样的错误，无法解决这个问题，你能回答我的问题吗***.com/questions/63396828/…

还有这个***.com/questions/63449399/css-file-is-not-importing

@AliRaza：我不会有太大帮助 - 已经转向更不透明但更简单的框架（他们在内部使用 webpack，但我看不到背后的魔力）

【参考方案2】：

出于某种原因；没有什么对我有用，所以我将css 文件添加到entry 的列表中：

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