1

I'm compiling my first angular library using rollupjs and I need your help :)

Currently I have a structure like this:

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

And my component1.scss looks like this

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

:host {

.trigger {

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

My variables.sccs looks like:

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

and my rollup.config.js looks like:

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'
    ]
};

but when I execute I get this error:

[!] (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...

I tried adding importer from node-sass but to be honest I have no idea how to use it to compile everything into css and then inject it to my js (I can actually inject the scss into my template by using rollup-plugin-angular but I don't know how to compile scss)

Any help, tips or suggestions will be really appreciated :)

soni
  • 687
  • 1
  • 8
  • 23
  • This isn't an answer to your question, but I was having the exact same issue when trying to import scss files. I ended up using https://github.com/dherges/ng-packagr instead, and it works when importing your scss file into your angular components. – mrdeleon Mar 13 '18 at 18:54
  • Thanks! @mrdeleon I ended up using ng-packagr as the rollupjs configuration is the same in ng-packagr, so yes, this is actually a good solution :) – soni Mar 15 '18 at 08:47

0 Answers0