我知道 Rollup 用于捆绑 .js 文件。但是是否可以仅使用它来处理 css? (css、scss、less 等)。
我的意思是,如果我的 src 文件夹(入口文件夹)中有一个名为 index.css 的文件,并且我希望汇总在 dist 文件夹(输出文件夹)中处理它,如 index.css(但已处理,例如如果有一个导入的 .sass 文件或 css 变量)。
我怎样才能做到这一点?
示例 rollup.config.js
import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
const config = [
{
input: 'src/styles/index.scss',
output: {
file: 'dist/style.css',
name: "style",
},
plugins: [
postcss({
plugins: []
})
]
},
];
export default config
src/index.css :
@import 'other';
h1 {
color: green;
}
src/other.css
h2 {
color: red;
}
并且在 dist 文件夹中应该是一个 index.css ,其中包含两个 css 文件(和已处理)的所有代码。
像这样的东西:
dist/index.css
h1 {
color: green;
}
h2 {
color: red;
}
最佳答案
你需要这样的东西
import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
const config = [
{
input: 'src/styles/index.scss',
output: {
file: 'dist/style.css',
format: 'es'
},
plugins: [
postcss({
modules: true,
extract: true
})
]
},
];
export default config
关于css - 是否可以使用汇总来仅处理 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53653434/