配置@wordpress/scripts时postcss-mixins与autoprefixer失效求助

问题情况 #

使用WordPress作为CMS，基于@wordpress/scripts配置Webpack，已安装postcss-loader、postcss-import、postcss-simple-vars、postcss-nested、postcss-mixins、autoprefixer等依赖，终端无配置报错，但postcss-mixins（断点mixin不生效）和autoprefixer（未添加CSS前缀）功能失效，其余PostCSS插件正常工作。

示例代码 #

CSS代码 #

@define-mixin max-width-1100 {
    @media (max-width: 1100px) {
      @content;
    }
}
ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        list-style: none;

        @mixin max-width-1100 {
            flex-direction: column;
        }
    }

HTML代码 #

<ul class="index-ul">
    <li>Ali1</li>
    <li>Ali2</li>
    <li>Ali3</li>
    <li>Ali4</li>
</ul>

当前配置文件 #

package.json #

{
  "name": "portfoliotheme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "dev": "wp-scripts start",
    "devFast": "wp-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^26.15.0",
    "autoprefixer": "^10.4.16",
    "css-loader": "^6.8.1",
    "postcss-import": "^15.1.0",
    "postcss-loader": "^7.3.3",
    "postcss-mixins": "^9.0.4",
    "postcss-nested": "^6.0.1",
    "postcss-simple-vars": "^7.0.1",
    "style-loader": "^3.3.3"
  },
  "dependencies": {
    "normalize.css": "^8.0.1"
  }
}

webpack.config.js #

//Import the orginal config from the @wordpress/scripts package
const defaultConfig = require("@wordpress/scripts/config/webpack.config.js");

//Import the helper to find and generate the entry points in the src directory
const { getWebpackEntryPoints } = require("@wordpress/scripts/utils/config");

const path = require('path');


//Add a new enty point by extending the webpack config
module.exports = {
    ...defaultConfig,
    mode: 'development',
    entry: {
        ...getWebpackEntryPoints,
        path: path.resolve(__dirname, 'assets/scripts', 'main.js'),
    },
    output: {
        path: path.resolve(__dirname, 'assets/dist'),
        filename: 'main.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-import'),
                                    require('postcss-simple-vars'),
                                    require('postcss-nested'),
                                    require('postcss-mixins'),
                                    require('autoprefixer'),
                                ],
                            },
                        },
                    },
                ],
            },
        ],
    },
}

解决方案 #

1. 调整PostCSS插件顺序 #

postcss-mixins必须在postcss-simple-vars和postcss-nested之前加载，因为mixin定义需要先被解析，后续的变量、嵌套语法才能正确识别mixin调用。修改webpack.config.js中PostCSS插件顺序：

plugins: [
    require('postcss-import'),
    require('postcss-mixins'), // 移至此处，确保先解析mixin定义
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('autoprefixer'),
]

2. 配置autoprefixer的目标浏览器 #

autoprefixer需要明确目标浏览器范围才能生成对应前缀，在package.json中添加browserslist字段：

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
]

或者直接在autoprefixer插件配置中指定：

require('autoprefixer')({
    overrideBrowserslist: ["> 1%", "last 2 versions", "not dead"]
})

3. 修复Webpack配置的规则与入口问题 #

• 原有配置直接替换了module.rules，会覆盖@wordpress/scripts的默认CSS处理规则，改为扩展默认规则：

module: {
    ...defaultConfig.module,
    rules: [
        ...defaultConfig.module.rules,
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                require('postcss-import'),
                                require('postcss-mixins'),
                                require('postcss-simple-vars'),
                                require('postcss-nested'),
                                require('autoprefixer'),
                            ],
                        },
                    },
                },
            ],
        },
    ],
}

• getWebpackEntryPoints是函数，需要调用才能生成入口对象；同时修改入口key为有意义的名称，适配多入口输出：

entry: {
    ...getWebpackEntryPoints(), // 添加调用括号
    main: path.resolve(__dirname, 'assets/scripts', 'main.js'), // 替换key为main
},
output: {
    path: path.resolve(__dirname, 'assets/dist'),
    filename: '[name].bundle.js', // 使用[name]动态生成文件名
},

验证修改 #

运行npm run start或npm run build，检查生成的CSS文件：

• 确认@mixin max-width-1100被正确编译为媒体查询代码
• 确认flex相关属性已添加如-webkit-的前缀

内容的提问来源于stack exchange，提问作者Alipvd