Webpack没有加载CSS [英] Webpack not loading css

问题描述

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

This is my first time trying to set up Webpack, so I'm sure I'm missing something here.

我正在尝试加载我的PostCSS文件Webpack，使用ExtractTextPlugin生成一个css文件到dist。问题是Webpack似乎没有拿起css文件。它们属于客户端/样式，但我尝试将它们移动到共享，结果相同。

I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.

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

I ran Webpack with the --display-modules option, and verified that no css files display there.

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

I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.

这是我的prod配置：

Here is my prod config:

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

And here's an example of my main css file: @import 'normalize.css/normalize';

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

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

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

Would anyone have an idea on why this is happening? Am I missing something?

谢谢

推荐答案

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

Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.

希望它有所帮助。

这篇关于Webpack没有加载CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！