如何将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'] 
    } 
    ] 
}