Webpack没有加载CSS

Question

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

我试图用Webpack加载我的PostCSS文件,使用ExtractTextPlugin生成一个css文件到"dist".问题是Webpack似乎没有拿起css文件.它们属于"客户/风格",但我尝试将它们移动到"共享",结果相同.

我使用--display-modules选项运行Webpack,并验证没有显示css文件.

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

这是我的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/normalize';

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

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

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

谢谢

Answer 1

所以,经过三个小时的撞击我的头后,我终于明白了.我希望这将有助于将来的某些人.

我需要做的就是增加'./client/styles/main.css'入口点.Yey.

Answer 2

因为你使用的是样式加载器和css-loader.您可以在js文件中包含css.您可以在使用样式的javascript文件中require(style.css)或import 'style.css'(如果使用ES6).无需为web包提供css 的入口点.

希望能帮助到你.

Answer 3

对我来说，"sideEffects": false我的 package.json 中有，这导致 webpack 不发出 CSS。