【Issues-Webpack-N1】extract-text-webpack-plugin使用css-loader報錯

【Issues-Webpack-N1】extract-text-webpack-plugin使用css-loader報錯

錯誤描述：
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'postcss' of null

目的：將 css 都打包到同一個指定文件當中，出現如上報錯

代碼：

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

var cssLoader = [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            // modules: true, // 爲true會將類名打包成hash值
            importLoaders: 1 // 前面有幾個loader 值就是多少
        }
    },
    {
        // 使用postcss時候必須要有選項，並且選項中必須有內容
        // 否則會報錯：No Postcss config found.
        // 具體配置和選項參考：https://github.com/michael-ciniawsky/postcss-load-config
        loader: 'postcss-loader',
        // 配置也可以通過 postcss.config.js 指定
        options: {
            plugins: (loader) => [
                require('autoprefixer')()
            ]
        }
    }
];

module.exports = { // css loader
    test: /\.css$/,
    use: ExtractTextPlugin.extract(cssLoader)
    // use: ExtractTextPlugin.extract({
    //     fallback: 'style-loader',
    //     use: 'css-loader'
    // })
};

如果使用 cssLoader 就會報錯，說無法讀取 ‘postcss’，如果換成如下：

module.exports = { // css loader
    test: /\.css$/,
    // use: ExtractTextPlugin.extract(cssLoader)
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
    })
};

就能正常使用，但是這樣就沒法使用 postcss 了，並且沒法配置更多的選項。

通過排除法，終於找出了導致失敗的的地方，但不知爲何會有影響

參考地址：ExtracCSS-Fail-Issue

解決方法：

去掉 cssLoader 裏面的 style-loader，添加 fallback: 'style-loader'

最後 cssLoader.js 的代碼完整如下：

/*
  css loader
*/

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

var cssLoader = [
    // 'style-loader',
    {
        loader: 'css-loader',
        options: {
            // modules: true, // 爲true會將類名打包成hash值
            importLoaders: 1 // 前面有幾個loader 值就是多少
        }
    },
    {
        // 使用postcss時候必須要有選項，並且選項中必須有內容
        // 否則會報錯：No Postcss config found.
        // 具體配置和選項參考：https://github.com/michael-ciniawsky/postcss-load-config
        loader: 'postcss-loader',
        // 配置也可以通過 postcss.config.js 指定
        options: {
            plugins: (loader) => [
                require('autoprefixer')()
            ]
        }
    }
];

module.exports = { // css loader
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: cssLoader
    })
};

可實現功能：

1. 將*.css文件內的樣式打包到一個文件內
2. 自動添加前綴