web-dev-qa-db-fra.com

Webpack ne charge pas css

C'est la première fois que j'essaie de configurer Webpack, donc je suis sûr que je manque quelque chose ici.

J'essaie de charger mes fichiers PostCSS avec Webpack, en utilisant ExtractTextPlugin pour générer un fichier CSS dans "dist". Le problème est que Webpack ne semble pas récupérer les fichiers CSS. Ils sont sous "client/styles", mais j'ai essayé de les déplacer vers "partagés", avec le même résultat.

J'ai exécuté Webpack avec l'option --display-modules et vérifié qu'aucun fichier CSS ne s'y affiche.

J'ai essayé de l'exécuter sans le plugin d'extrait de texte, et le résultat est le même: aucun CSS n'est intégré à bundle.js.

Voici ma config 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' ] })
  ]
};

Et voici un exemple de mon fichier css principal: @import 'normalize.css/normalize';

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

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

Quelqu'un aurait-il une idée de pourquoi cela se produit? Suis-je en train de manquer quelque chose?

Merci

javascriptcsswebpackpostcss
17
Claudia

Puisque vous utilisez style-loader et css-loader. Vous pouvez inclure css dans le fichier js lui-même. Vous pouvez simplement require(style.css) ou import 'style.css' (si vous utilisez ES6) dans le fichier javascript qui utilise les styles. Pas besoin de fournir un point d'entrée à webpack pour css.

J'espère que ça aide.

12
sandeep

Donc, après trois heures à me frapper la tête contre le mur, je l'ai finalement compris. J'espère que cela aidera quelqu'un à l'avenir.

Tout ce que je devais faire était d'ajouter './client/styles/main.css' aux points d'entrée. Ouais.

30
Claudia