Webpack mit postcss-loader erkennt precss nicht

Question

Ich habe eine React-App (aus create-react-app ausgeworfen) und versuche, PostCSS zur Webpack-Konfiguration hinzuzufügen.

Hier ist meine (verkürzt) webpack.config.js:

... 
const postCSSConfig = require('./postcss.config'); 

module.exports = { 
    ... 
    module: { 
     loaders: [ 
      ... 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader?importLoaders=1', 
        'postcss-loader' 
       ] 
      }, 
      ... 
     ] 
    }, 
    postcss: function() { 
     return postCSSConfig; 
    }, 
... 

Hier ist mein postcss.config.js:

module.exports = { 
    plugins: [ 
    require('precss'), 
    require('autoprefixer') 
    ] 
} 

Meine Dateistruktur ist:

project/ 
    src/ 
    assets/ 
    components/ 
    styles/ 
    views/ 
    index.js 
    package.json 
    postcss.config.js 
    webpack.config.js 

Wenn Ich versuche, dass mein CSS einige der Funktionen von PreCSS enthält (zum Beispiel Verschachtelung und Variablen), es bricht das Styling und macht es Es funktioniert nicht. Aber die autoprefixer funktioniert. Ich habe npm install für PreCSS ausgeführt und versucht, Dinge neu zu arrangieren, aber immer noch kein Glück. Jeder Rat würde geschätzt werden.

Answer 1

Haben Sie versucht, Ihre post-css-Konfiguration direkt in Ihre Webpack-Konfiguration aufzunehmen? Ich hatte Erfolg damit, ich kann wirklich keine Dokumentation über postcss.config finden und wie man sie richtig schreibt.

module.exports = { 
... 
    module: { 
    loaders: [ 
    ... 
    { 
     test: /\.css$/, 
     loaders: [ 
     'style-loader', 
     'css-loader?importLoaders=1', 
     'postcss-loader' 
     ] 
    }, 
    ... 
    ] 
    }, 
    postcss: function() { 
    return [ 
     require('precss'), 
     require('autoprefixer') 
    ]; 
    } 
};