Webpack 不加载 CSS答案

【问题标题】：Webpack not loading cssWebpack 不加载 CSS
【发布时间】：2023-03-20 00:05:01
【问题描述】：

这是我第一次尝试设置 Webpack，所以我确定我在这里遗漏了一些东西。

我正在尝试使用 Webpack 加载我的 PostCSS 文件，使用 ExtractTextPlugin 将 css 文件生成到“dist”中。问题是 Webpack 似乎没有拾取 css 文件。它们位于“客户端/样式”下，但我尝试将它们移至“共享”，结果相同。

我使用 --display-modules 选项运行 Webpack，并验证那里没有显示任何 css 文件。

我尝试在没有提取文本插件的情况下运行它，结果是一样的：bundle.js 中没有内置 CSS。

这是我的产品配置：

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;
}

有人知道为什么会这样吗？我错过了什么吗？

谢谢

【问题讨论】：

标签： javascript css webpack postcss

【解决方案1】：

所以，在我的头撞墙三个小时后，我终于明白了。我希望这对将来的人有所帮助。

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

【讨论】：

【解决方案2】：

由于您使用的是 style-loader 和 css-loader。您可以在 js 文件本身中包含 css。您可以在使用样式的 javascript 文件中只使用 require(style.css) 或 import 'style.css'（如果使用 ES6）。无需为 css 提供 webpack 的入口点。

希望对你有帮助。

【讨论】：

感谢您的提示。 :) 就我而言，我正在处理一个同构应用程序，所以我需要在 JS 之前加载样式，否则会出现 FOUC。但是，在其他情况下会记住这一点。
然后使用看看isomorphic style loader，它解决了FOUC问题。它是同构应用程序样式加载器的扩展。

【解决方案3】：

与 OP 的问题没有直接关系，但这是我的问题（我的 CSS 也没有加载）。

就个人而言，我错过了style-loader 包：https://webpack.js.org/guides/hot-module-replacement/#hmr-with-stylesheets

【讨论】：

对，就我而言，我只是在升级到 webpack 5 后忘记更新 style-loader 和 css-loader
谢谢，遇到了完全相同的问题。

【解决方案4】：

在我的例子中，它与 react-hot-loader 有关。我正在使用 webpack.HotModuleReplacementPlugin() 并在我的编辑器中删除它后 CSS 开始工作。

【讨论】：

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