如何将 CSS 文件导入 webpack? [英] How to import CSS files into webpack?

问题描述

根据文档，CSS 文件应该只是被imported.

According to the documentation, CSS file should just be imported.

我刚开始使用 webpack 并尝试导入 CSS 文件，但我收到一条关于缺少模块的消息:

I am just starting with webpack and tried to import a CSS file but I get a message about a module missing:

D:Dropboxdevjekylllog>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:Dropboxdevjekylllogwebpack'
resolve 'navbar.css' in 'D:Dropboxdevjekylllogwebpack'
  Parsed request is a module
  using description file: D:Dropboxdevjekylllogpackage.json (relative path: ./webpack)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:Dropboxdevjekylllogpackage.json (relative path: ./webpack)
    resolve as module
      D:Dropboxdevjekylllogwebpack
ode_modules doesn't exist or is not a directory
      D:Dropboxdevjekyll
ode_modules doesn't exist or is not a directory
      D:Dropboxdev
ode_modules doesn't exist or is not a directory
      D:Dropbox
ode_modules doesn't exist or is not a directory
      D:
ode_modules doesn't exist or is not a directory
      looking for modules in D:Dropboxdevjekylllog
ode_modules
        using description file: D:Dropboxdevjekylllogpackage.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:Dropboxdevjekylllogpackage.json (relative path: ./node_modules)
          using description file: D:Dropboxdevjekylllogpackage.json (relative path: ./node_modules/navbar.css)
            as directory
              D:Dropboxdevjekylllog
ode_modules
avbar.css doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:Dropboxdevjekylllog
ode_modules
avbar.css doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:Dropboxdevjekylllog
ode_modules
avbar.css.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:Dropboxdevjekylllog
ode_modules
avbar.css.json doesn't exist
[D:Dropboxdevjekylllogwebpack
ode_modules]
[D:Dropboxdevjekyll
ode_modules]
[D:Dropboxdev
ode_modules]
[D:Dropbox
ode_modules]
[D:
ode_modules]
[D:Dropboxdevjekylllog
ode_modules
avbar.css]
[D:Dropboxdevjekylllog
ode_modules
avbar.css]
[D:Dropboxdevjekylllog
ode_modules
avbar.css.js]
[D:Dropboxdevjekylllog
ode_modules
avbar.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 的根目录 - 同样的问题.

I initially thought (before using --display-error-details) that this was due to some problems with the path structure (specifically forward vs. backward slashes) but then moved navbar.css into the root of the folder webpack - same issue.

详细错误显示在nodes_module(通过所有目录树搜索)中寻找CSS文件.为什么?然后我应该如何导入webpack/static/css/myfile.css 中相对于webpack.config.js 位置的文件?

The detailed error shows that the CSS file is sought after in nodes_module (which is hunted down though all the directories tree). Why? How should I then import a file which is in webpack/static/css/myfile.css relative to the location of webpack.config.js?

注意:尝试 require 而不是 import

Note: the same issue exists when trying require instead of import

推荐答案

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

You have to import them like any JavaScript module. That means, when the imported file is neither a relative path (starting with ../ or ./), nor an absolute path (starting with /), it is resolved as a module. By default webpack will look for modules in the node_modules directory (in the current directory and all parent directories). This is the same behaviour that Node.js uses.

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

To import webpack/static/css/myfile.css in webpack/entry.js you have to use a relative path.

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

如果你不想使用相对路径，你可以使用 resolve.modules 或者你可以使用 resolve.alias.

If you don't want to use a relative path, you can change the directories that webpack uses to find a module with the resolve.modules or you can use resolve.alias.

在您的 webpack 配置中，您还定义了 module.rules 和 module.loaders.当 webpack 看到 module.rules 时，它会完全忽略 module.loaders，所以你的 babel-loader 不会被使用.你应该只使用 module.rules.

In your webpack config you also defined both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely, so your babel-loader wouldn't be used. You should only use module.rules.

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

这篇关于如何将 CSS 文件导入 webpack?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！