Question

我正在使用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;
        }
    }
}

我的变量.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 into我的模板，但我不知道如何编译scss）

任何帮助，提示或建议都将非常感激：）

使用@import和$ variables将scss编译为rollupjs

0 个答案: