1

我正在使用 rollupjs 编译我的第一个角度库，我需要你的帮助:)

目前我有这样的结构：

.src
 --components
   --component1
     --component1.ts
     --component1.scss
     --component1.html
 --common
   --_variables.scss

我的 component1.scss 看起来像这样

@import "../../core/sass/variables";

:host {

.trigger {

        &.clear_btn {
            color: $color-grey;
        }
    }
}

我的 variables.sccs 看起来像：

$color-grey-light: #e3e3e3;
$color-grey: #bfbfbf;

我的 rollup.config.js 看起来像：

export default {
    input: 'build/index.js',
    output: {
        file: 'dist/common.js',
        format: 'es',
    },
    plugins: [
        angular({
            preprocessors: {
                template: template => minifyHtml(template, htmlminOpts),

                style: scss => {
                    const css = sass.renderSync({data: scss}).css;
                    return cssmin.minify(css).styles;
                },
            }
        })
    ],
    external: [
        '@angular/core',
        '@angular/animations',
        '@angular/router',
        '@angular/platform-browser',
        '@angular/forms'
    ]
};

但是当我执行我得到这个错误：

[!] (angular plugin) Error: File to import not found or unreadable: ../../core/sass/variables.
Parent style sheet: stdin
build/app/components/toggle/toggle.component.js
Error: File to import not found or unreadable: ../../core/sass/variables.
Parent style sheet: stdin...

我尝试从node-sass添加导入器，但老实说，我不知道如何使用它将所有内容编译到 css 中，然后将其注入到我的 js 中（我实际上可以使用 rollup-plugin-angular 将 scss 注入到我的模板中，但是我不知道如何编译scss）

任何帮助、提示或建议将不胜感激:)

4

0 回答 0