Architecture for using SCSS with Angular 2/4

Question

I am trying to setup an architecture for using SCSS with my angular 4 project rather than plain CSS. Uptil now i have followed the Angular Style guide to arrange CSS simply adjacent to components ts files with each component having a separate directory, as in following the feature first approach.

Since now i am moving to using SCSS, i simple replaced my CSS files with SCSS files. But i am not able to understand, where exactly should i put my _variables.scss, _mixins.scss, and common styles.scss files, such that variables are always the first to load, so that variables dependencies can be resolved in the SCSS files.

I am using webpack to compile my SCSS files.

webpack.config.js

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[ext]'
        },
        {
           test: /\.scss$/,
           use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
            ]
        }
    ]}

Since i am not very good at designing and architecturing an app, any help would be highly appreciated.

you have several options there. we used bootstrap and sass. you need to include sass bootstrap package into your project. ref: https://github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-3-and-Sass-and-ngx-bootstrap — dee zg, Jun 23 '17 at 06:57
Do you know any way of doing it without including bootstrap or some other styling library? My project requires me to build my own CSS framework for an angular widget library with as less space as possible. — Karan Hudia, Jun 23 '17 at 07:02
you can refer to this post: https://stackoverflow.com/questions/42433995/using-sass-in-angular-2 — dee zg, Jun 23 '17 at 07:08
FYI: `ts` and `scss` loaders are already built in Webpack 2.x — lmaooooo, Jun 23 '17 at 07:52
@deezg I do not just want to use local component variables but rather global variables to be used around the whole web app. For ex- `$colorPrimary`, `$colorAccent`, the post you mentioned only shows how to use local variables. — Karan Hudia, Jun 23 '17 at 09:58
@Nikolai Did you use a global `_variable.scss` file as well ? If yes, then how exactly ? — Karan Hudia, Jun 23 '17 at 10:02

score 2 · Answer 1 · answered Jun 23 '17 at 07:49

If you want some common style code, and you're already using Webpack, then you can simply import the common styles into your main module. For example:

Directory Structure

/src
  /app
    app.component.html
    app.component.ts
    app.component.scss
  /styles
    _mixins.scss
    _variables.scss
    common.scss
  app.module.ts
  main.ts

In your app.module.ts file you can import './styles/common.scss', which will basically have all of your mixins and such imported into it. Your app.component.scss file will likely want to import "../styles/variables" and perhaps some mixins too.

The other option to having common stylesheets is to simply import the parts whenever you need them into component *.scss files rather than bringing them all in at once. This could prevent you from importing parts that you don't really need.

I did as you asked. I have imported my `variables.scss` inside `app.component.scss` and my `app.component.scss` file inside the `AppComponent` using `styleUrls: []`. But still inside other components `SCSS`, variables are not getting resolved. — Karan Hudia, Jun 23 '17 at 09:56

score 0 · Accepted Answer · answered Nov 28 '17 at 06:49

0

Someone developed a seed angular application with considering SASS and perfect architecture and everything else one might need.

Have fun exploring it. This Worked wonders for me.

Angular Library Seed

answered Nov 28 '17 at 06:49

Karan Hudia

553
3
19

Architecture for using SCSS with Angular 2/4

2 Answers2