如何配置 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 文件的插件。

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

How to configure Rollup and PostCSS to bundle LESS and CSS (Tailwind)

less

postcss

rollupjs