依赖升级地狱。这个 CSS 加载程序有什么问题?
Dependency upgrade hell. What is wrong with this CSS loader?
在依赖升级地狱。想知道是否可以从任何人那里得到提示。
除了一件事之外,能够解决所有问题。我在项目中使用 CSS 模块和 PostCSS。我正在升级到 Webpack 2 并借此机会升级所有其他包。
我遇到的问题是 CSS 处理器之一。基本上任何包含从另一个文件加载 class 的组合 属性 的 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
让一些不应该通过的东西通过。除此之外,我不确定该去哪里看。
建议?
我遇到了完全相同的问题。我对装载机有相同的配置,现在唯一能解决问题的是使用 "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
})
]
我正在使用 css 模块和 Webpack 2,在我尝试添加 new webpack.NamedModulesPlugin()
之前它工作正常。如果您正在使用它,请尝试将其删除并查看 css 模块是否工作
在依赖升级地狱。想知道是否可以从任何人那里得到提示。
除了一件事之外,能够解决所有问题。我在项目中使用 CSS 模块和 PostCSS。我正在升级到 Webpack 2 并借此机会升级所有其他包。
我遇到的问题是 CSS 处理器之一。基本上任何包含从另一个文件加载 class 的组合 属性 的 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
让一些不应该通过的东西通过。除此之外,我不确定该去哪里看。
建议?
我遇到了完全相同的问题。我对装载机有相同的配置,现在唯一能解决问题的是使用 "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
})
]
我正在使用 css 模块和 Webpack 2,在我尝试添加 new webpack.NamedModulesPlugin()
之前它工作正常。如果您正在使用它,请尝试将其删除并查看 css 模块是否工作