如何配置 Rollup 和 PostCSS 以捆绑 LESS 和 CSS (Tailwind)

Question

我正在整理一个启动工具包，将React 组件库与Rollup 捆绑在一起。 该库包括使用LESS 的Antd 和Tailwind。

我的rollup.config.ts 文件有问题：

[!] Error: Unexpected character '@' (Note that you need plugins to import files that 
are not JavaScript)
src\tailwind.css (1:0)
@import 'tailwindcss/base';
^

我不知道如何配置“rollup-plugin-postcss”。我看到了几个选项：

• 只使用一次插件，同时处理 LESS 和 CSS。
• 使用该插件两次，一次仅用于 LESS 文件，另一次仅用于 CSS 文件。

在任何一种情况下，我总是会收到错误消息，因为我无法告诉插件仅在 css 或 less 扩展上运行，尽管在 extensions 选项中指定了它们。

这是我的rollup 配置：

import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss'
import copy from 'rollup-plugin-copy'

const packageJson = require('./package.json')

export default {
    input: 'src/index.ts',
    output: [
        {
            file: packageJson.main,
            format: 'cjs',
            sourcemap: true
        },
        {
            file: packageJson.module,
            format: 'esm',
            sourcemap: true
        }
    ],
    plugins: [
        peerDepsExternal(),
        resolve(),
        commonjs(),
        typescript({ useTsconfigDeclarationDir: true }),
        postcss({
            config: {
                path: './postcss.config.js'
            },
            use: {               
                less: { javascriptEnabled: true }
            },
            extensions: ['.less'], // Looks like this still processes CSS despite this line.
            extract: false         
        }),
        postcss({
            config: {
                path: './postcss.config.js'
            },
            extensions: ['.css'],
            extract: false
        })        
    ]
}

src/index.ts:

import './tailwind.css'
export * from './test-component'

src/tailwind.css：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

postcss.config.js

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss')('./tailwind.config.js'),
        require('autoprefixer'),
        require('postcss-preset-env')({
            browsers: ['last 2 versions', '> 5%'],
        }),
        require('cssnano'),
    ],
};

Answer 1

你必须在 commonjs 之前使用 postcss 插件，否则它会尝试将 CSS 文件的内容解释为 JavaScript。也许它也需要在解决之前出现，但不确定。

进行这些更改后，您可能不需要对 .less 文件执行任何操作，因为 rollup-plugin-postcss 已经处理了它们。

编辑：查看存储库后，您不需要在其他插件之前使用 postcss 插件，只需省略 postcss 扩展选项或正确设置（在 css 前面缺少一个点）：

 plugins: [
        peerDepsExternal(),
        postcss({
            minimize: true,
            modules: true,
            use: {
                sass: null,
                stylus: null,
                less: { javascriptEnabled: true }
            }, 
            extract: true
        }),
        resolve(),
        commonjs(),
        typescript({
            useTsconfigDeclarationDir: true
        }),
    ]

不过，为了更加安全，我建议在处理非 JS 文件之前使用处理非 JS 文件的插件。