CODEWITHSUNDEEP
angularsass
JaeHo Song
JaeHo Song

Reputation: 123

Collecting all scss and build by Angular CLI or webpack - Angular 2+

When I do ng serve or ng build, I want the cli/webpack to collect all scss under the project and build it.

I have a component with scss like below

src/app/page/home.ts
src/app/page/home.scss
src/app/page/home.html

and I coded like below

@Component({
    templateUrl: 'home.html'
})

As, you can see, I didn't add stylesUrl and I want to be compiled by CLI.

POINT of the Question: How can I let CLI compile scss files without adding them to @Component({styleUrls: ...}) or anywhere.

How can I do it?

Upvotes: 0

Views: 54

Answers (2)

BogdanC
BogdanC

Reputation: 2784

If you have a new project, generate your Angular CLI project with:

ng new project_name --style=scss

Angular CLI will handle the rest.

If you already have the project:

ng set defaults.styleExt scss

Upvotes: 1

Alan Macgowan
Alan Macgowan

Reputation: 481

You can use node-sass, sass-loader and raw-loader.

Install them and save to package.json:

npm install node-sass sass-loader raw-loader --save-dev

Then in you webpack.common.js in the "rules" section:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] 
}

And finally in the component you can use the styleUrls:

@Component({
  styleUrls: ['./filename.scss'],
})

Upvotes: 0

Related Questions