使用Webpack和Babel加载CSS时出错

Question

I'm building a SSR React App with Webpack3 and Babel6 but when I run the server, it cannot find any css file (Error: Cannot find module './file.css').

Here is my folder structure so far:

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

App.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/
  }
  ....
]}

Any ideas?

Answer 1

By default when you install packages locally, they go into node_modules folder in your project directory, therefore style-loader and css-loader are also included there. From your webpack.config.js file you are excluding this packages, which are needed in compiling your css assets. just remove the exclude line and every thing would be fine.

your webpack.config.js file would look like this.

webpack.config

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