2017-03-01 29 views
0

我有一個作出反應的應用程序(從創建反應的應用程序內彈出)和我試圖PostCSS添加到的WebPack配置。的WebPack與postcss裝載機不承認precss

這裏是我的(縮短)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; 
    }, 
... 

這裏是我的postcss.config.js:

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

我的文件結構是:

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

當我嘗試讓我的CSS包含PreCSS中的一些功能(例如,嵌套和變量),它會打破樣式,並執行沒有工作。但是,autoprefixer的作品。我爲PreCSS運行了npm install,並嘗試重新安排事情,但仍然沒有運氣。任何意見,將不勝感激。

+0

什麼錯誤時,它打破? –

+0

@AdamWolski沒有錯誤,CSS只是不支持嵌套(和其他事情)。 –

+0

嘗試從你的配置中刪除'postcss'字段。插件應該自己查找文件。 –

回答

0

你嘗試只包括你的CSS後的配置,直接到你的WebPack配置?我已經成功地做到了這一點,我無法找到任何有關postcss.config的文檔以及如何正確編寫它們。

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

不幸的是,這並沒有奏效。雖然謝謝! –

相關問題