在 css-loader 之后使用 postcss-loader
Posted
技术标签:
【中文标题】在 css-loader 之后使用 postcss-loader【英文标题】:Using postcss-loader after css-loader 【发布时间】:2018-11-02 12:34:16 【问题描述】:我将 CSS 模块与 webpack css-loader 一起使用,然后我将它们与 mini-css-extract-plugin 捆绑在一起。 这是我的配置的样子:
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
loader: "css-loader",
options:
modules: true,
localIdentName: "[name]-[local]_[hash:base64:5]",
imports: true,
importLoaders: 1
,
"postcss-loader"
]
出于某种原因(请参阅 cmets 部分),我真的很想将 postcss-loader 应用于不是每个单独的 .css 文件,而是应用于整个包。我怎样才能做到这一点?
【问题讨论】:
每个 css 模块都封装了组件应该响应的所有媒体查询。我想使用css-mqpacker
将它们组合在一起。事实上,一切都在我当前的配置中运行,但 css-mqpacker 在一个特定的 .css 文件中运行。而我想要的是将 postcss 的东西应用到整个包中
【参考方案1】:
感谢大家尝试解决我的问题。毕竟我找到了解决方案。我不再使用postcss-loader
,而是像这样使用OptimizeCssAssetsPlugin
:
new OptimizeCssAssetsPlugin(
cssProcessor: postcss([CSSMQPacker]),
),
【讨论】:
非常感谢!这可能是整个互联网上的唯一提示。由于在文件之间共享postcss-css-variables
,我现在使用您的解决方案。我只有一个问题...使用postcss-loader
时,我可以正确收到variable --xyz is undefined and used without a fallback
之类的警告,但是当通过插件从postcss-loader
切换到您的解决方案时,警告完全被吞没了,所以我无法检测到可能的问题。你能帮我解决这个问题吗?
下一个问题是源映射不工作,并且在监视期间构建时间很慢,因为它一次又一次地处理所有文件,而不仅仅是一个修改过的文件。所以我想我应该避免走这条路。【参考方案2】:
您是否使用 @import 引用您的其他 CSS?
我一直在尝试做同样的事情来合并重复的 CSS 选择器。我使用 postcss-import 取得了一定的成功。它将合并您的所有导入,因此您可以在 css-loader 将其全部捆绑之前使用 postcss 对其进行处理。
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
loader: 'css-loader',
options:
modules: true,
localIdentName: '[name]-[local]_[hash:base64:5]'
,
loader: 'postcss-loader',
options:
plugins: [
require('postcss-import'),
require('css-mqpacker')
]
]
不幸的是,这可能会导致资产路径问题,因为 postcss 对 webpack 的路径解析一无所知。
您可以使用别名来解决这个问题。
require('postcss-import')(
resolve: id => id.replace(/^~?(@example-alias)/, path.resolve(__dirname, './src'))
),
希望这会有所帮助。我也想要一个使用 css-loader 的更简单的解决方案。
理想情况下:import & combine (css-loader) > postcss > bundle (css-loader)
【讨论】:
【参考方案3】:您可以编写一个 webpack 插件在 css 包上运行并在其上应用您的 postCss 插件。
您可以查看我写的一些插件作为参考: https://github.com/wix-incubator/extract-tpa-style-webpack-plugin/blob/master/src/index.js#L71
【讨论】:
以上是关于在 css-loader 之后使用 postcss-loader的主要内容,如果未能解决你的问题,请参考以下文章
Laravel Mix / Tailwind 使用 css-loader 编译问题