css - 使用 Webpack 和 Babel 加载 CSS 时出错

Question

我正在使用 Webpack3 和 Babel6 构建一个 SSR React 应用程序，但是当我运行服务器时，它找不到任何 css 文件(错误:找不到模块“./file.css”)。

到目前为止，这是我的文件夹结构:

src/
  |-components/
     |-App/
        |-App.css
        |-App.jsx

应用程序.jsx

....
import './App.css';
....

webpack.config.js

....
module.exports: { loaders: [
  ....
  {
    test: /\.css$/,
    loader: ['style-loader', 'css-loader'], // I have loaders installed and included in package.json devDependencies
    include: path.join(__dirname, 'src'),
    exclude: /node_modules/
  }
  ....
]}

有什么想法吗？

Answer 1

默认情况下，当您在本地安装包时，它们会进入元素目录中的 node_modules 文件夹，因此 style-loader 和 css-loader 也包含在那里。从您的 webpack.config.js 文件中，您排除了编译您的 css Assets 所需的这些包。只需删除排除行，一切都会好起来的。

您的 webpack.config.js 文件将如下所示。

webpack.config

....
module.exports: { loaders: [
....
{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader'],
  include: path.join(__dirname, 'src'),
}
....
]}