如何将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)
srctailwind.css (1:0)
@import 'tailwindcss/base';
^

我不知道如何配置"汇总插件postpass"。我看到了一些选择：

• 只使用一次插件，同时处理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';

postss.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文件做任何事情，因为汇总插件postpass已经处理了这些文件。

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

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

尽管如此，为了更加安全，我建议在处理非JS文件的插件之前使用这些插件