依赖升级地狱。这个CSS加载器有什么问题?

时间:2017-03-05 18:26:24

标签: webpack webpack-style-loader postcss css-loader

依赖升级地狱。想知道我是否可以从任何人那里得到小费。

能够把一切都搞砸了,但有一件事。我正在项目中使用带有PostCSS的CSS模块。我正在升级到Webpack 2并借此机会升级所有其他软件包。

我遇到的问题是其中一个CSS处理器。基本上任何包含从另一个文件加载类的composes属性的CSS文件都会失败。

这就是Webpack CSS加载器的样子:

test: /\.css/,
exclude: /node_modules/,
use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            modules: true,
            localIdentName: '[folder]__[local]___[hash:base64:5]',
            importLoaders: 1
        }
    },
    'postcss-loader'
]

当我尝试加载使用带有这些组合之一的样式表的页面时,我在浏览器错误控制台中看到此错误:

Dynamic page loading failed TypeError: Cannot read property 'removeChild' of null
    at removeStyleElement (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:122:25)
    at remove (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:168:4)
    at Array.updateStyle (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:180:4)
    at addStylesToDom (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:69:22)
    at module.exports (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:37:2)
    at eval (eval at ./app/components/EntryGroup/styles.css (1.chunk.js:29), <anonymous>:7:77)
    at Object../app/components/EntryGroup/styles.css (1.chunk.js:29)
    at __webpack_require__ (main.js:687)
    at fn (main.js:106)
    at eval (eval at ./app/components/EntryGroup/index.js (1.chunk.js:22), <anonymous>:3:70)

style-loader似乎抛出了错误,但我认为这是因为css-loader正在通过它不应该做的事情。除此之外,我不确定在哪里看。

建议?

2 个答案:

答案 0 :(得分:5)

我正在使用css模块和Webpack 2,并且在我尝试添加new webpack.NamedModulesPlugin()之前它工作正常。如果您正在使用它,请尝试删除它并查看css模块是否正常工作

答案 1 :(得分:0)

我遇到了同样的问题。我对加载器有相同的配置,现在解决问题的唯一方法就是使用“ExtractTextPlugin”。我知道不建议使用ExtractTextPlugin进行开发,因为它会减慢编译时间,但是我现在还没有其他解决方案。如果我使用以下配置,一切都像魅力一样。

module: {
    rules: [
        // CSS
        {
            test: /\.css$/,
            include: path.join(__dirname, 'src'),
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss-loader'
            })
        }
    ]
},
plugins: [
    new ExtractTextPlugin({
        filename: 'bundle.min.css',
        allChunks: true
    })
]