[英]rollup: how to rollup tailwind scss in Vue sfc?
I'm trying to build a component library using Vue.js3, Rollup.js, and Tailwind CSS.我正在尝试使用 Vue.js3、Rollup.js 和 Tailwind CSS 构建组件库。
package.json package.json
{
"private": true,
"main": "dist/plugin.js",
"module": "dist/plugin.mjs",
"files": [
"dist/*"
],
"scripts": {
"dev": "vite",
"build": "rollup -c"
},
"peerDependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.1",
"@vue/compiler-sfc": "^3.2.37",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"rollup": "^2.77.2",
"rollup-plugin-vue": "^6.0.0",
"sass": "^1.54.4",
"tailwindcss": "^3.1.8",
"vite": "^3.0.4"
}
}
rollup.config.js rollup.config.js
import vue from 'rollup-plugin-vue';
import packageJSON from './package.json';
export default [
{
input: 'src/index.js',
output: [
{
format: 'esm',
file: packageJSON.module,
sourcemap: true,
},
{
format: 'cjs',
file: packageJSON.main,
sourcemap: true,
}
],
plugins: [
vue({
css: true
}),
]
}
];
Then I got a component styled via scss
inside of vue sfc powered by tailwindcss:然后我在由 tailwindcss 提供支持的 vue sfc 中通过
scss
获得了一个组件样式:
src/components/test.vue src/components/test.vue
<template>
<p
class="test">
test component
</p>
</template>
<style lang="scss">
.test {
@apply text-white bg-red-500;
}
</style>
src/components/index.js src/components/index.js
import test from './test.vue';
export default {
test
}
src/index.js src/index.js
import components from './components/index.js';
const plugin = {
install(app, options) {
app.component('test', components.test);
}
}
export default plugin;
[:] Error.
[:] 错误。 Unexpected token (Note that you need plugins to import files that are not JavaScript) src/components/test?vue.vue&type=style&index=0&id=e43c18bc&lang:scss (2:0) 1: 2. :test { ^ 3;
Unexpected token (注意你需要插件来导入不是 JavaScript 的文件) src/components/test?vue.vue&type=style&index=0&id=e43c18bc&lang:scss (2:0) 1:2. :test { ^ 3; @apply text-white bg-red-500: 4: }
@apply text-white bg-red-500: 4: }
run npm run build
in online reproduction运行
npm run build
在线复现
So, how can I use scss with tailwindcss in rollup to build a package?那么,如何在汇总中使用带有 tailwindcss 的 scss 来构建 package?
I've googled this but nothing helps.我用谷歌搜索了这个,但没有任何帮助。 Thanks a lot for your patience!
非常感谢您的耐心等待!
I have found a library a long time ago that did it with TypeScript and I forked it.很久以前我找到了一个库,它用 TypeScript 完成了它,我分叉了它。 But I'm not sure how it works.
但我不确定它是如何工作的。 Here's the code:
这是代码:
src/index.ts src/index.ts
import plugin, * as components from 'src/entry.esm';
type NamedExports = Exclude<typeof components, 'default'>;
type ExtendedPlugin = typeof plugin & NamedExports;
Object.entries(components).forEach(([componentName, component]) => {
if (componentName !== 'default') {
const key = componentName as Exclude<keyof NamedExports, 'default'>;
const val = component as Exclude<ExtendedPlugin, typeof plugin>;
(plugin as ExtendedPlugin)[key] = val;
}
});
export default plugin;
src/entry.esm.ts src/entry.esm.ts
import { App, Plugin } from 'vue';
// Import vue components
import * as components from 'src/components/index';
// install function executed by Vue.use()
const install: Exclude<Plugin['install'], undefined> = function installLibrary(app: App) {
Object.entries(components).forEach(([componentName, component]) => {
app.component(componentName, component);
});
};
// Create module definition for Vue.use()
export default install;
// To allow individual component use, export components
// each can be registered via Vue.component()
export * from 'src/components/index';
src/components/index.ts src/components/index.ts
import '../tailwind.css';
export { default as ComponentOne } from './ComponentOne.vue';
export { default as ComponentTwo } from './ComponentTwo.vue';
export { default as ComponentThree } from './ComponentThree.vue';
There is no reference to Tailwind CSS in the rollup.config.js
file. rollup.config.js
文件中没有对 Tailwind CSS 的引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.