如何配置汇总和PostCSS以捆绑LESS和CSSTailwind

问题描述

我正在整理一个入门工具包，以将React组件库与Rollup捆绑在一起。该库包括使用Antd和LESS的{{1}}。

我的Tailwind文件中有一个问题：

rollup.config.ts

我不知道如何配置“ rollup-plugin-postcss”。我看到一些选择：

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

无论哪种情况，我总是收到一条错误消息，因为尽管在[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) src\tailwind.css (1:0) @import 'tailwindcss/base'; ^中进行了指定，但我无法告诉插件仅在css或less扩展名上运行选项。

这是我的extensions配置：

rollup

src / index.ts：

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         
        }),extensions: ['.css'],extract: false
        })        
    ]
}

src / tailwind.css：

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

postcss.config.js

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

解决方法

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

进行了这些更改之后，由于rollup-plugin-postcss已经可以处理这些文件，因此您可能无需对.less文件做任何事情。

编辑：查看存储库后，您无需在其他插件之前使用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文件的插件。

less postcss rollupjs