在Angular 2/4中使用SCSS的体系结构

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.

Answer 1

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.

Answer 2

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