正在协调antd导入与postpass

Question

我正在尝试使用postcss-env-function，以便能够在javascript和less/css之间共享变量。我在构建过程中遇到以下错误。如果我删除索引的第一行，错误就会消失。less：

@import '~antd/dist/antd.less';

不过，我不会接受antd的风格。(如果我删除postcss-loader，也没有错误(。如何解决这个问题？

最小存储库

---

错误：

ERROR in ./src/styles/index.less (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/styles/index.less)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-env-fn: <css input> Unknown word
> 1 | opacity=45

webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
const fs = require('fs');
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
function buildConfig(args) {
var rootConfig = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.[fullhash].js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
devtool: (args && args.production ? false : 'inline-cheap-source-map'),
devServer: {
contentBase: './dist',
disableHostCheck: true,
hot: true,
historyApiFallback: true,
proxy: {
'/api': {
target: `https://${process.env.API_HOST}:8081`,
secure: false,
}
},
https: {
key: fs.readFileSync(process.env.SSL_KEY_FILE),
cert: fs.readFileSync(process.env.SSL_CERT_FILE),
}
},
module: {
rules: [
{
test: /.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /.(c|le)ss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
postcssOptions: {
ident: 'postcss',
plugins: { 'postcss-env-function': { importFrom: { environmentVariables: { '--test': '200px' } } } }
} } },  
{ loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true } } },
]
},
{
test: /.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf|jpeg)$/,
use: [
{ loader: 'file-loader' },
]
}
],
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: require('html-webpack-template'),
devServer: (args && args.production) ? undefined : `https://${process.env.BUBI_API_HOST}:8080`,
meta: [
{
name: 'og:title',
content: 'frontend-react'
},
{
name: 'og:description',
content: 'React app'
},
],
mobile: true,
lang: 'en-GB',
title: 'frontend-react',
scripts: [
],
}),
new CopyPlugin([
{ from: 'static_assets/', to: '' },
]),
],
};
if (args && args.production) {
rootConfig = {
...rootConfig,
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
extractComments: 'all',
})],
usedExports: true,
},
};
}
return rootConfig;
}
module.exports = buildConfig;

版本：少加载程序：8.1.1后处理程序：8.3.5后处理程序加载程序：6.1.1

指数开始。小于：

@import '~antd/dist/antd.less'; 
@shadow: 0px 0px 15px rgba(0,0,0,0.08);
@body-background-color: #f7fafc;
.text {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: @body-background-color;
padding: 0; 
overflow-x: hidden;
}

package.json:

declare module '*.jpg';
declare module '*.jpeg';
declare module '*.png';

.babelrc:

{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}

Answer 1

编译后的CSS似乎包含filter: alpha(opacity=45);，而postcss-env-function不喜欢。

"；未知单词"；异常由postcss-values-parser抛出(postcss-env-function使用它来解析CSS声明值(。

理想情况下，在您的情况下，您应该将ignoreUnknownWords选项传递给postcss-values-parser以忽略filter: alpha声明，但postcss-env-function不允许您这样做。

因此，一个可能的解决方案是修改postcss-env-function，以便将ignoreUnknownWords选项传递给解析器。

另一种可能的解决方案是从CSS中删除所有filter: alpha(opacity=#)声明，因为只有IE8及以下版本支持它；插件"；其遍历所有CCD_ 15声明，并且如果其值以"0"开头则将其移除；α"：

webpack.config.js:

{ loader: 'postcss-loader', options: {
postcssOptions: {
ident: 'postcss',
plugins: [
root => root.walkDecls('filter', decl => {
if (decl.value.startsWith('alpha')) decl.remove();
}),
{ 'postcss-env-function': { importFrom: { environmentVariables: { '--test': '200px' } } } },
],
}
} },

Answer 2

这似乎是关于不透明度的语法错误。最常见的样式使用对象，因此您可以将不透明度声明为：

style = {
opacity:"45%"
}

我不完全确定less是如何工作的，因为我主要使用sass、scs和css，但是，我相信你的问题是将你的不透明性声明为{opacity=45}而不是{opacity:45}。发布你的风格代码来检查语法错误会很有帮助，但我会从那里开始寻找。