Webpack未加载css

Question

这是我第一次试图陷害Webpack，所以我肯定我错过了一些东西。

我试图用Webpack加载我的PostCSS文件，使用ExtractTextPlugin生成一个css文件到"dist“中。问题是Webpack似乎没有拿起css文件。它们在"client/styles“之下，但我尝试将它们移动到”共享“，结果是相同的。

我运行Webpack与-显示-模块选项，并证实没有css文件显示在那里.

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

下面是我的prod配置：

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/正常化’；

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

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

有人知道为什么会发生这种事吗？我是不是遗漏了什么？

谢谢

Answer 1

因为您使用的是样式加载程序和css加载程序。您可以在js文件本身中包含css。您可以在使用样式的javascript文件中只使用require(style.css)或import 'style.css' (如果使用ES6)。没有必要为webpack提供css的入口点。

希望能帮上忙。

Answer 2

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

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

Answer 3

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

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