PostCSS & Webpack Konfiguration

Question

Ich bin wirklich entmutigt, weil ich keine nützliche Ressource zu diesem Thema finden kann.

ich nur mag, dass meine CSS-Dateien, Verwendung Post css' Plugins sehen, sie zu transformieren und sie schließlich zu meinen/öffentlichen Ordnern exportieren, wie ich bereits mit meiner .jsx Datei tue

Hier ist meine Web-Pack-Konfiguration

const path = require('path'); 
const webpack = require('webpack'); 

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: path.resolve('src/index.jsx'), 
    output: { 
     path: path.resolve('public'), 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     extensions: ['*', '.js', '.jsx'] 
    }, 
    devServer: { 
     publicPath: "/", 
     contentBase: "./public" 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       exclude: /node_modules/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { 
          loader: 'css-loader', 
          options: { 
           modules: true, 
           localIdentName: '[name]__[local]___[hash:base64:5]' 
          } 
         }, { 
          loader: 'postcss-loader', 
          options: { 
           plugins: function() { 
            return [require('lost'), require('postcss-cssnext'), require('postcss-import')] 
           } 
          } 
         } 
        ] 
       }) 
      }, { 
       test: /\.jsx?$/, 
       use: [ 
        { 
         loader: 'babel-loader', 
         options: { 
          presets: ['es2015', 'react'] 
         } 
        } 
       ], 
       exclude: /(node_modules|bower_components)/ 
      } 
     ] 
    }, 
    plugins: [new ExtractTextPlugin("main.css")] 
} 

Answer 1

ich nehme an, Sie verwenden webpack2

Wenn Sie Ihre CSS-Datei wollen separat abgeladen aus, würden Sie ExtractTextPlugin benötigen. Hier ist mein CSS-Lader, der funktioniert

Ich definiere die Post-Css-Plugins direkt in der Webpack-Konfiguration, denn dann bleibt es an einem Ort. Hoffe, das hilft:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
... 
... 
module.exports = { 
... 
... 
    module: { 
     rules: [ 
... 
... 
      { 
       test: /\.css$/, 
       exclude: /node_modules/, 
       loader: ExtractTextPlugin.extract(
        { fallback: 'style-loader', 
        use: [{ 
         loader: 'css-loader', 
         options: { 
          modules: true, 
          localIdentName:'[name]__[local]___[hash:base64:5]' 
         } 
        }, 
        { 
         loader: 'postcss-loader', 
         options: { 
          plugins: function() { 
           return [ 
            require('autoprefixer') 
           ] 
          } 
         } 
        }, 
       ] 
      }) 
     }, 
} 

Answer 2

Vielleicht sind Ihre Plugins inkorrekt erstellt.

Versuchen

return [require('lost')(), require('postcss-cssnext')(), require('postcss-import')()] 

(Beachten Sie die(), um das Plugin Schöpfung aufrufen).

Verwenden Sie auch import/require(), um Ihre CSS aufzunehmen? Wenn nicht sollten Sie, keine magischen Sachen werden glob Ihre CSS :)