node-sass

[aminebizid]

Could you please add node-sass and revert to scss files

[ospatil]

@filipesilva would you be interested in a pull request for SASS support? I have it working locally.

[filipesilva]

I am not currently interested in that, no. It is outside the scope of this repository. Thank you for asking though.

[ospatil]

@zigzag95, you can check out https://github.com/ospatil/angular-quickstart-lib. I have added npm scoped package and sass support.

[danwulff]

@ospatil Thanks for your work adding sass support! 😃 Your changes worked just fine for me.

[benjamincharity]

[I know this is outside the scope of this repo, but I wasn't sure where else to ask this since issues aren't enabled on the Sass fork - sorry in advance..]

---

@ospatil did you get your fork working with Sass partial imports? I was able to get scoped package and Sass support working, but the demo chokes on imports.

I notice that the .css file generated correctly has the content from the imported sass file, but the compiled .js component still points to the .scss file:

Is there an easy way around this? It seems that simply changing the JS import from .scss to .css would solve this, but I haven't found a way to run a find/replace after each tsc compilation (only after an NPM task).

[sebelga]

I had the same problem. To solve it I added this to the inlineStyle (in inline-resource.js):

styleUrl = styleUrl.replace(/\.scss$/, '.css');

And it works perfectly with sass So the function is like this now:

function inlineStyle(content, urlResolver) {
    return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function (m, styleUrls) {
        const urls = eval(styleUrls);
        return 'styles: ['
            + urls.map(styleUrl => {
                styleUrl = styleUrl.replace(/\.scss$/, '.css');
                const styleFile = urlResolver(styleUrl);
                const styleContent = fs.readFileSync(styleFile, 'utf-8');
                const shortenedStyle = styleContent
                    .replace(/([\n\r]\s*)+/gm, ' ')
                    .replace(/"/g, '\\"');
                return `"${shortenedStyle}"`;
            })
                .join(',\n')
            + ']';
    });
}

[benjamincharity]

Ahh that is much easier than where my brain was going! Thanks @sebelga!

Currently, my build-demo script simply runs tsc -p src/demo/. It seems that inline-resource.js is only called from build.js which is in turn only called when doing a full build of the library.. Did you add a call to inline during the build of the demo (npm run start)?

[sebelga]

Ah yes that's another problem that I didn't solve as I am developing my library inside a Lerna project so I don't use the npm start from here... Sorry I can't help you there.

[benjamincharity]

Darn. I'm currently npm-linking into my core project to develop, but can't hand off the project as complete until I solve this.

I hadn't heard of Lerna... looks pretty useful for this type of problem 👍

Thanks for the responses!

[sebelga]

A good starting point for Lerna + Angular modules is https://github.com/OasisDigital/scalable-enterprise-angular good luck!

[ravinsinghd]

@sebelga what about import statements and variable in scss files. seems to be replace method not handle that

[benjamincharity]

@ravinsinghd what exactly are you seeing that doesn't work? Are you seeing final CSS files with variables that haven't been transpiled? Or is this in relation to running the demo app?

[ravinsinghd]

@sebelga i have some scss that import other scss, also scss files contain variables. so while doing build i want scss converted to css and inline to component.

[benjamincharity]

Interesting.. with the above changes to the inlineStyles method, the build was working correctly for me. I did have to make some more changes to get the demo app working correctly with styles.

[apeter10]

Thanks for @ospatil and @sebelga’s help. I have added sass support in my repo. https://github.com/apeter10/angular-quickstart-lib

[mattiLeBlanc]

@apeter10 Thanks for forking. I did notice that when you run in demo, the SCSS style template is not processed correctly. It is just handled like it's CSS and and nesting will not be applied. You added some sass-build task which will create a CSS file for the build only. Is there an easy way while running npm start to load in the SCSS template (like with anuglar cli)?

[oscarpr]

I get my seed works with my own scss files, but need help to get it works with scss files that are into externals libraries. please help!!!!