Webpack не загружает css

Это мой первый раз, когда я пытаюсь настроить Webpack, поэтому я уверен, что что-то здесь упускаю.

Я пытаюсь загрузить свои файлы PostCSS с помощью Webpack, используя ExtractTextPlugin для создания файла css в «dist». Проблема в том, что Webpack не загружает css-файлы. Они находятся в разделе «клиент/стили», но я попытался переместить их в «общие» с тем же результатом.

Я запустил Webpack с параметром --display-modules и убедился, что там не отображаются файлы css.

Я попытался запустить его без плагина извлечения текста, и результат тот же: CSS не встроен в bundle.js.

Вот моя конфигурация продукта:

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

Кто-нибудь знает, почему это происходит? Я что-то упускаю?

Спасибо


person Claudia    schedule 23.01.2016    source источник


Ответы (4)


Поскольку вы используете загрузчик стилей и загрузчик css. Вы можете включить css в сам файл js. Вы можете просто require(style.css) или import 'style.css' (при использовании ES6) в файле javascript, который использует стили. Нет необходимости предоставлять точку входа в webpack для css.

Надеюсь, поможет.

person sandeep    schedule 23.01.2016
comment
Спасибо за совет. :) В моем случае я имею дело с изоморфным приложением, поэтому мне нужно, чтобы стили загружались до JS, иначе будет FOUC. Тем не менее, буду иметь это в виду для других ситуаций. - person Claudia; 24.01.2016
comment
Затем посмотрите на isomorphic style loader, это решает проблему FOUC. Это расширение загрузчика стилей для изоморфных приложений. - person sandeep; 24.01.2016

Итак, после трех часов биения головой о стену, я, наконец, понял. Я надеюсь, что это поможет кому-то в будущем.

Все, что мне нужно было сделать, это добавить './client/styles/main.css' к точкам входа. Ага.

person Claudia    schedule 23.01.2016

Не имеет прямого отношения к проблеме OP, но здесь была моя проблема (мой CSS тоже не загружался).

Лично мне не хватало пакета style-loader: https://webpack.js.org/guides/hot-module-replacement/#hmr-with-stylesheets

person Drarig29    schedule 13.02.2021

В моем случае это было связано с react-hot-loader. Я использовал webpack.HotModuleReplacementPlugin(), и после его удаления CSS в моем редакторе начал работать.

person Daniel Kamiński    schedule 23.03.2021