我刚刚开始将 PostCSS 与 Webpack 一起使用。当使用postcss-import内联外部样式表时，我看到它的选项允许我们配置要应用于导入源的插件和转换器，但我对它如何与为主 PostCSS 运行器配置的其他选项结合在一起有点困惑。
例如，如果我想内联 URL，我应该将插件添加postcss-url到postcss-importPostCSS 运行程序还是两者（如果我的主样式表也有 URL 引用）？
我有http://cssnext.io设置的postcss解析器,我试图找到一种方法来设置一个variables.css文件来包含我所有的主题设置.
到目前为止variable.css看起来有几个vars
:root {
--color-white: #FFF;
--color-black: #000;
}
我将其导入到我想要使用这些变量的其他文件中,所以@import './variables.css'或者类似,然后在该文件中使用它,background-color: var(--color-white)例如,但是我得到了以下警告:
变量' - color-white'未定义并且没有后备使用[postcss-custom-properties]
升级到最新版本的webpack后,我看到了这个错误:
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'postcss'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated …
create-react-app以一个看起来像这样的App.js启动你:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
注意import './App.css'- 匿名导入此CSS文件.App.css具有CSS类等App和App-header,然后由字符串中的引用render的阵营组分的方法.这种神奇的联系是如何发生的？这是css-loader npm包的功能吗？如果是,那么这个功能记录在哪里？我已经弹出应用程序来检查Webpack配置,但是我无法理解这种链接是如何发生的.
我试图找出postcss-loader有什么用。
在github页面上
https://github.com/postcss/postcss-loader
它说：
用于webpack的Loader以使用PostCSS处理CSS
我不明白：所以，PostCSS是一个用PostCSS处理CSS的WP-Loader吗？
恕我直言，这是一个循环定义。
那么什么是PostCSS，它是CSSLoader吗？或者，由于它被称为Post CSS，它是要在其他CSS加载程序之后运行的加载程序吗？
我正在使用webpack和postcss-loader来自动修复和缩小我的CSS,然后将其加载到css-loader中以使用css-modules.我在缩小CSS方面遇到了麻烦.通过webpack检查发出的.js文件显示CSS没有用cssnano缩小(因为我仍然可以看到空格字符).我究竟做错了什么？
一些相关的配置文件:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var postCompileScript = require('./postCompile');
module.exports = {
entry: './src/popup.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({})
],
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: …是否有用于将文件导入/嵌套在选择器内的 postcss 解决方案？我无法得到postcss-import或postcss-nested做我所追求的事情。
.some-selector {
@import 'some.css';
}
给定一个文件，例如import-me.css包含
div {
color: red;
}
我想处理entry.css
.some-class {
@import 'import-me.css';
}
并查看输出
.some-class div {
color: red;
}
谢谢！
更新：对于这个简单的例子，您可以使用postcss-nested-importAND来避免它postcss-nested，但这有几个缺点，因为（a）postcss-nested-import路径是相对于运行它的脚本，而 css 约定是导入应该相对于调用文件（b）维护者已放弃它https://github.com/eriklharper/postcss-nested-import/issues/2 <--- 这个问题依次引用https://github.com/postcss/postcss-import/issues/214这是一个死线程:-(
对于 Tailwind 和 PostCSS/PurgeCSS 来说相当新，所以希望这是一个相当简单的修复。
在我的 中tailwind.config.js，我扩展了一些间距值，包括添加 0.5 值以与默认的 Tailwind 间距比例对齐。我的文件如下所示（摘录）：
module.exports = {
important: false,
theme: {
spacing: {
'0.5': '0.125rem',
},
},
}
然后我使用 PostCSS 编译我的 CSS，如下所示，你可以看到我使用了一堆效果很好的插件：
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('postcss-responsive-type'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano'),
]
}
到目前为止，一切都进展顺利！但是，我想清除 css 以删除 Tailwind 创建的所有未使用的实用程序类。这对我的 postcss 文件产生如下影响：
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('postcss-responsive-type'),
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content: [
'./*.php',
'./**/*.php',
],
defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
}),
require('cssnano'),
] …我按照这个安装步骤在 create-react-app 中配置了 tailwindcss。它有效，但在添加 tailwindcss/jit 后，应用程序无法正常工作。我认为这是因为 create-react-app 不支持 PostCSS 8，但似乎 tailwindcss/jit 需要 PostCSS 8。
任何的想法？
我正在尝试将我的代码上传到服务器上，但由于存在中等漏洞，它不允许我这样做。我已经将我的问题缩小到从安装 react 应用程序下载的旧版本 postcss，特别是 react-scripts。我试过卸载 postcssreact-scripts然后postcss先安装，但是每当我进行安装时，它都会在其对node-modules文件夹的依赖项中安装一个错误的版本。
记录一些错误，以防我的问题没有 postcss
Moderate Regular Expression Denial of Service
Package postcss
Patched in >=8.2.10
Dependency of react-scripts
Path react-scripts > postcss-preset-env > postcss-place > postcss
More info https://npmjs.com/advisories/1693
Moderate Regular Expression Denial of Service
Package postcss
Patched in >=8.2.10
Dependency of react-scripts
Path react-scripts > postcss-preset-env >
postcss-pseudo-class-any-link > postcss
More info https://npmjs.com/advisories/1693
Moderate Regular Expression Denial of Service
Package postcss
Patched in >=8.2.10
Dependency of react-scripts
Path react-scripts …postcss ×10
css ×4
webpack ×4
reactjs ×3
javascript ×2
tailwind-css ×2
autoprefixer ×1
css-purge ×1
cssnano ×1
cssnext ×1
node.js ×1
purge ×1