使用 webpack 和 postCSS 功能配置@wordpress/scripts

Question

我使用wordpress作为CMS，我想使用webpack配置@wordpress/scripts并添加PostCSS及其插件，例如：postcss-loader，postcss-import，postcss-simple-vars，postcss-nested，postcss-mixins，autoprefixer

正如我的文件（package.json 和 webpack.config.js）所示，安装的所有内容和配置在 vscode 终端上都没有任何错误，其中一些 postcss 功能正常工作，而其他一些则不能。 例如 postcss-loader、postcss-import、postcss-simple-vars、postcss-nested 工作正常，但 postcss-mixins、autoprefixer 不起作用。

例如，如果我创建像这样的导航，断点 mixin 不起作用，并且 autoprifixer 也不起作用：

@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;
        }
    }

<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'),
                                ],
                            },
                        },
                    },
                ],
            },
        ],
    },
}

任何有用的帮助将不胜感激。

Answer 1

默认的 Webpack 配置已经预先配置了所有这些。 （正如您在源代码here中看到的那样，但其他地方似乎没有记录它。）

最简单的事情是创建一个 PostCSS 配置文件

postcss.config.js

，如下所示：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('postcss-mixins'),
    require('autoprefixer'),
  ]
}

删除

webpack.config.js

中的自定义加载程序配置，它应该可以工作。

您可以在此处阅读更多相关信息。