Webpack无法加载CSS。

Question

这是我第一次尝试设置Webpack，所以我肯定错过了些什么。

我正在尝试使用ExtractTextPlugin将我的PostCSS文件加载到Webpack中，并生成一个CSS文件到“dist”文件夹。问题是Webpack似乎没有捕捉到CSS文件。它们在“client/styles”下，但我已经尝试将它们移到“shared”，结果依然相同。

我运行了带有--display-modules选项的Webpack，并验证没有CSS文件显示在其中。

我已经尝试过不使用extract text插件运行它，结果仍然一样：没有CSS构建到bundle.js中。

这是我的生产环境配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: [
    './client'
  ],
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/'
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },

      {
        test: /\.css?$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader!postcss-loader'
        ),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ],
  postcss: (webpack) => [
    require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
    require('postcss-url')(),
    require('precss')(),
    require('postcss-fontpath')(),
    require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
  ]
};

这里是我的主CSS文件的示例： @import 'normalize.css/normalize';

/* Variables */
@import 'variables/colours';

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

有人知道为什么会发生这种情况吗？是我漏掉了什么吗？

谢谢

- Claudia

Answer 1

所以，经过三个小时的挣扎，我终于搞定了。我希望这会帮助到未来的某个人。

我所需要做的就是将'./client/styles/main.css'添加到入口点中。耶。

- Claudia

Answer 2

由于你正在使用style-loader和css-loader。你可以在js文件中包含css。你只需要在使用样式的javascript文件中，使用require(style.css)或import 'style.css'（如果使用ES6）即可。不需要为css提供入口点到webpack。

希望有所帮助。

- sandeep

---

谢谢你的建议。 :) 在我的情况下，我正在处理一个同构应用程序，所以我需要在 JS 之前加载样式，否则会出现 FOUC。但是，我会记住这个建议以备其他情况。 - Claudia

然后看一下 同构样式加载器，它可以解决FOUC问题。它是用于同构应用程序的样式加载器的扩展。 - sandeep

Answer 3

对我而言，在我的package.json中有"sideEffects": false，这导致webpack不会生成CSS。

- frodo2975

---

感谢@frodo2975！在我的情况下，sideEffects中有特定的文件("sideEffects": [ fileA.js, fileB.js])也阻止了我尝试加载的特定文件。 - Curt

Answer 4

虽然这段内容与原帖问题不直接相关，但是我遇到了同样的问题（我的CSS也没有加载）。

个人经验来看，我缺少了style-loader这个包：https://webpack.js.org/guides/hot-module-replacement/#hmr-with-stylesheets

- Drarig29

---

没错，在我的情况下，我只是在升级到webpack 5后忘记更新style-loader和css-loader。 - vldmrrr

谢谢，我也遇到了完全相同的问题。 - Koray Tugay

Answer 5

在我的情况下，它与 react-hot-loader 相关。我正在使用 webpack.HotModuleReplacementPlugin() ，在删除它后，我的编辑器中的 CSS 开始工作了。

- Daniel Kamiński

---

只是为了让这个信息有用：你的意思是说react-hot-loader处理热模块替换，所以webpack的插件可以被移除？谢谢。 - funder7