为什么Webpack忽略我的CSS文件? [英] Why is Webpack ignoring my CSS files?

问题描述

我正在尝试使webpack将我的CSS文件(使用PostCSS)编译为一个单独的文件.从文档中看来，这正是ExtractTextPlugin应该执行的操作.但是，我无法让webpack对CSS文件做任何事情.

I'm trying to get webpack to compile my CSS files (using PostCSS) to a separate file. From the documentation, it seems like this is exactly what ExtractTextPlugin should do. However, I cannot get webpack to do anything at all with my CSS files.

相关项目结构:

dist
 ⎣js
   ⎣bundle.js
public
 ⎣css
   ⎣style.css*
src
 ⎣css
   ⎣index.css

* file doesn’t exist (hasn’t been created)

webpack.config.babel.js

webpack.config.babel.js

import webpack from 'webpack';
import path from 'path';

import ExtractTextPlugin from 'extract-text-webpack-plugin';

import { WDS_PORT } from './src/shared/config';
import { isProd } from './src/shared/util';

export default {
  entry: [
    'react-hot-loader/patch',
    './src/client',
  ],
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: isProd ? '/static/' : `http://localhost:${ WDS_PORT }/dist/`,
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 1,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: 'inline',
              },
            },
          ],
        }),
      },
    ],
  },
  devtool: isProd ? false : 'source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.css'],
  },
  devServer: {
    port: WDS_PORT,
    hot: true,
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new ExtractTextPlugin('./public/css/style.css'),
  ],
};

这将很乐意正确地编译我的JavaScript，但是对CSS完全没有任何作用.怎么了，怎么解决?

This will happily compile my javascript correctly, but it does nothing at all to my CSS. What's going wrong, and how do I fix it?

推荐答案

Webpack仅处理在某些时候导入的文件.可以将其指定为入口点，也可以将其导入到从入口点引用的任何文件中.规则不会导入任何文件，只要导入通过测试(与您的情况下的正则表达式匹配)，它们就会被简单地应用.

Webpack only processes files that are being imported at some point. That is either specified as an entry point or being imported in any file referenced from an entry point. The rules don't import any files, they are simply applied whenever an import passes the test (matches the regular expression in your case).

您需要像导入其他模块一样导入CSS.

You need to import your CSS just like any other module.

import './css/index.css';

另请参见代码拆分-CSS .

这篇关于为什么Webpack忽略我的CSS文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！