Import scss from node_modules as string.

[vacarsu]

How to import scss files from node_modules as string, similar to how we import component scss files. When I try to do import scssFile from 'ionic-angular/path/to/scss-file.scss'; I get undefined. I understand I could do this using require() or @import in scss file. But I need to do it in this way because I am compiling scss using sass.js so I can have dynamic color variables.

[hsdhillon]

Your should be able to provide relative path to the file using '../' notations. Let's say if you need to define the file inside the component located clients folder, you should be able to use import as import from '../node_modules/ionic-angular/path/to/scss-file.scss'

[vacarsu]

@hsdhillon Yes I tried that, but when I console log the value it's undefined. and I don't get an error that the file was not found, so it is finding the file, but for some reason it is undefined.

[vacarsu]

@Urigo Any suggestions for this issue? I'm trying to import some scss files in node_modules from the imports folder. Is this possible from a .ts file?

[DAB0mB]

@vacarsu Unfortunately, adding custom loaders is not available in Meteor's build system. However, if you use Webpack, you can use the following loader: https://github.com/jtangelder/sass-loader. You can use whatever loader you desire, as long as it fulfills what you wish for, and you use it right, then that's the way to go. We have a tutorial in our websites which guides you through building an application using Webpack and Meteor and it's available here: https://angular-meteor.com/tutorials/whatsapp2/ionic/setup. Take your time to investigate about Webpack and its bundling system, and see how you can combine it with Meteor in a way that is right for YOUR application, it might take you some time. Please give me your feedback so I can know if my answer was helpful.

[vacarsu]

@DAB0mB I think you're misunderstanding what I'm trying to do, I already am compiling the scss with sass.js, and that works, but importing scss files in node_modules returns undefined.I can import scss files fine from component folders, etc. But I cannot import in node_modules for some reason.

[DAB0mB]

@vacarsu You can also compile it natively if you want using node-sass. This way you have more control of what's going on.

Edit: Sorry this doesn't seem to be helpful. I'm still looking for a proper solution

[DAB0mB]

Try the following:

@import "~lib-name/sass-file-name";

In addition, Ionic uses the following syntax for their stylesheets:

@import "{}/node_modules/ionicons/dist/scss/ionicons.scss";

Whatever works best for you....

[vacarsu]

Neither of those options will work for me. While they do work, I have to import them from TS files so I have them as strings.

[Urigo]

everyone please try to new and updated angular-compilers package. It supports:

• Typescript compilation
• Assets compilation (HTML, styles)
• Angular's AoT compilation
• Rollup's bundling with Tree Shaking

Please open a new issue if you encountered one.

[pedrolucasoliva]

Hi, i'm trying to implement a dynamic theme import. This worked at meteor 1.5 and now I get this error, because "require" have be stopped read scss:

Error: Cannot find module '../../shared/styles/themes/theme-a.scss'

My code:

import { Injectable } from '@angular/core';

const themeA = require('../../shared/styles/themes/theme-a.scss');
const themeB = require('../../shared/styles/themes/theme-b.scss');
const themeC = require('../../shared/styles/themes/theme-c.scss');
const themeD = require('../../shared/styles/themes/theme-d.scss');
const themeE = require('../../shared/styles/themes/theme-e.scss');
const themeF = require('../../shared/styles/themes/theme-f.scss');
const themeG = require('../../shared/styles/themes/theme-g.scss');
const themeH = require('../../shared/styles/themes/theme-h.scss');

@Injectable()
export class ThemesService {

    styleTag: any;
    defaultTheme: string = 'A';

    constructor() {
        this.createStyle();
        this.setTheme(this.defaultTheme);
    }

    private createStyle() {
        const head = document.head || document.getElementsByTagName('head')[0];
        this.styleTag = document.createElement('style');
        this.styleTag.type = 'text/css';
        this.styleTag.id = 'appthemes';
        head.appendChild(this.styleTag);
    }

    setTheme(name) {
        switch (name) {
            case 'A':
                this.injectStylesheet(themeA);
                break;
            case 'B':
                this.injectStylesheet(themeB);
                break;
            case 'C':
                this.injectStylesheet(themeC);
                break;
            case 'D':
                this.injectStylesheet(themeD);
                break;
            case 'E':
                this.injectStylesheet(themeE);
                break;
            case 'F':
                this.injectStylesheet(themeF);
                break;
            case 'G':
                this.injectStylesheet(themeG);
                break;
            case 'H':
                this.injectStylesheet(themeH);
                break;
        }
    }

    injectStylesheet(css) {
        this.styleTag.innerHTML = css.default;
    }

    getDefaultTheme() {
        return this.defaultTheme;
    }

}

There is another option?

[Metrophobe]

so is it actually possible to import an scss file from inside node_modules folder? I tried to import an scss file from inside node_modules with fourseven:scss installed. no luck.