javascript - body - Webpack no cargando css

webpack css

Question

Esta es la primera vez que trato de configurar Webpack, así que estoy seguro de que me estoy perdiendo algo aquí.

Estoy tratando de cargar mis archivos PostCSS con Webpack, usando ExtractTextPlugin para generar un archivo css en "dist". El problema es que Webpack no parece recoger los archivos css. Están bajo "cliente / estilos", pero he intentado moverlos a "compartido", con el mismo resultado.

Ejecuté Webpack con la opción --display-modules, y verifiqué que no se muestran archivos css allí.

He intentado ejecutarlo sin el complemento de extracción de texto, y el resultado es el mismo: no hay CSS integrado en bundle.js.

Aquí está mi configuración de producto:

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

Y aquí hay un ejemplo de mi archivo css principal: @import ''normalize.css / normalize'';

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

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

¿Alguien tendría una idea de por qué esto está sucediendo? ¿Me estoy perdiendo de algo?

Gracias

Answer 1

Entonces, después de tres horas de golpear mi cabeza contra la pared, finalmente lo conseguí. Espero que esto ayude a alguien en el futuro.

Todo lo que tenía que hacer era agregar ''./client/styles/main.css'' a los puntos de entrada. Yey

Answer 2

Ya que estás usando style-loader y css-loader. Puede incluir css en el propio archivo js. Solo puede require(style.css) o import ''style.css'' (si usa ES6) en el archivo javascript que usa los estilos. No es necesario proporcionar un punto de entrada a webpack para css.

Espero eso ayude.