使用Rollup 打包vue文件报错 (style 使用的是less)

vue文件中使用

打包时报错

index.less is not parsed yet

构建时候使用了 rollup-plugin-less 插件无效

rollup.config.js如下：

import vue from 'rollup-plugin-vue';

import css from 'rollup-plugin-css-only';

import less from 'rollup-plugin-less';

import typescript from 'rollup-plugin-typescript2';

import {nodeResolve} from '@rollup/plugin-node-resolve';

import {name} from '../package.json';

import {terser} from 'rollup-plugin-terser';

const file = type => `dist/${name}.${type}.js`;

const overrides = {

compilerOptions: {declaration: true},

exclude: ['tests/**/*.ts', 'tests/**/*.tsx', 'src/main.ts']

};

export {name, file};

const baseConfig = {

input: 'src/index.ts',

output: {

name,

file: file('esm'),

format: 'esm'

plugins: [nodeResolve(), typescript({tsconfigOverride: overrides}), vue(), terser(), less(), css({output: 'bundle.css'})],

external: ['@vue/composition-api', '@types/js-md5', '@types/crypto-js', 'vue', 'lodash-es', 'vue-demi', 'axios', 'crypto-js', 'jsencrypt', 'js-md5']

};

export default baseConfig;

求解决

慕粉0935116641 2021-07-29

源自：业务组件库打包、发布，添加 CI/CD 5-2 使用 npm publish 发布业务组件库

收起

2回答

张轩 2021-08-03 10:27:31

同学你好今天试了一下解决了方案如下

首先需要修改一下 .vue 中的 style 的 src，改成内连的样式，因为我发现 rollup-vue-plugin 好像和 webpack 不一样，他不支持直接 src 级别的编译。

<style lang="less">
.essc-text {
    box-sizing: border-box;
    white-space: pre-wrap;
    position: relative !important;
}
</style>

或者你可以运行之前先运行一遍 less 将它编译成 css

<style src="style.css"/>

然后修改一下配置文件

// 注意 less 是不需要的，只要设置 preprocessStyles 属性即可，vue plugin 可以直接处理 less
plugins: [nodeResolve(), typescript({tsconfigOverride: overrides}), 
vue({preprocessStyles: true}), terser(), css({output: 'bundle.css'})],

最后打包成功，请看截图：

收起回答

张轩 2021-07-29 18:12:44

同学你好我这里正好有个使用 sass 的例子，我想 less 应该是一样的

你可以试试看，我使用的是 postcss plugin，css plugin 就不需要了

安装两个依赖
"postcss": "^8.3.5",
"rollup-plugin-postcss": "^4.0.0"

import postcss from 'rollup-plugin-postcss'

使用
vue({ preprocessStyles: true }),
postcss({ extract: path.resolve('dist/index.css') })

收起回答