如何解决VueJS Rollup导出多个Scss资源
是否可以使用Rollup for Vue导出多个(s)css资源? 我想完成的是:
- components.scss 从src / components / ** / *。vue(包括@import文件)中提取了
<style lang="scss">
。 - components.css 使用tailwindcss和autoprefixer解析了components.scss。
- theme.scss 默认的通用主题样式(按钮等)
- theme.css 使用tailwindcss和autoprefixer解析了theme.scss
到目前为止,我已经设法使用rollup-plugin-bundle-scss将dist / components.scss捆绑在一起,但是我不确定如何添加其他文件。如果我将index.js条目文件中的theme.scss导入,它也将添加到捆绑包中,这不是我想要的。我可以在package.json中公开src / assets / theme.scss,但我仍然需要一个已解析的版本
如果有一种在捆绑之前复制components.scss的方法,那将是一个不错的选择。
我的rollup.config.js的一部分
plugins: [
bundleScss({output: 'components.scss',exclusive: false }),scss(),postcss(),resolve({ extensions: ['.js','.jsx','.ts','.tsx','.vue'] }),vue( { css: true })
]
postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,autoprefixer,],};
有人想到如何实现这一目标吗?
解决方法
我想我只是在自欺欺人。发布此内容后,我注意到一个示例配置带有多个导出条目,因此我添加了一个带有theme.scss作为输入的配置条目。输出与预期的一样。
我不喜欢的一件事是构建过程会触发警告
发出的文件“ theme.css”将覆盖先前发出的文件 相同的名字。
意思是输出被写了两次,我不知道为什么会发生或者是否可以忽略它。
const cssOnlyConfig = {
input: 'src/assets/theme.scss',output: {
file: 'dist/theme.css',format: 'es',exports: 'default'
},plugins: [
postcss({
modules: false,extract: true
}),vue({
css:true,}),],};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。