CODEWITHSUNDEEP
angularsasswebpack-2
Connor McGill
Connor McGill

Reputation: 269

Including sass files in Angular 4 with Webpack 2

I'm trying to use scss files with my components in an Angular 4.3.5 web app using webpack 2.2.1. As an aside I cannot use angular-cli at the moment.

Here is my webpack.config file section for the loaders.

        {
            test: /\.scss$/,
            loader: 'raw-loader!postcss-loader!sass-loader'
        },

        // all css required in src/app files will be merged in js files
        {
            test: /\.less$/,
            loader: 'raw-loader!postcss-loader!less-loader'
        }

As you can see I also have a loader for less which works fine when a component uses less files.

Here is my test component.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss'],
})
export class TestComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

When I run npm run build I get the following error.

Error: Expected 'styles' to be an array of strings.

I have looked at countless other posts and searched high and low but I cannot prevent this error occurring no matter how I change my loaders or update webpack or use the extracttextplugin.

Any help would be hugely appreciated.

Upvotes: 0

Views: 479

Answers (1)

Nicolas Law-Dune
Nicolas Law-Dune

Reputation: 1703

Here is my config loader :

const appRoot = path.resolve(__dirname, './app');

    loaders: [
        { exclude: [/node_modules/, /Scripts/], test: /\.js$/, loader: 'source-map-loader' },
        { exclude: [/node_modules/, /Scripts/], test: /\.ts$/, loader: 'tslint-loader' },
        { test: /\.ts$/, exclude: [/\.(e2e\-spec|e2e)\.ts$/], loaders: ['angular2-template-loader', 'awesome-typescript-loader?configFileName=./Client/tsconfig.json', 'angular2-router-loader'] },
        { include: appRoot, test: /\.css$/, loaders: ['raw-loader'] },
        //{ include: appRoot, test: /\.less$/, loaders: ['style-loader', 'less-loader'] },
        { include: appRoot, test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
        { exclude: appRoot, test: /\.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }) },
        {
            test: /\.less$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: ['css-loader', 'less-loader' ]
            })
        },
        { exclude: appRoot, test: /\.scss$|\.sass$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'sass-loader'] }) },
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
        { test: /\.html$/, loader: 'html-loader' },
        { test: /\.(otf|woff|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 25000 } },
        { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 25000, mimetype: 'font/woff2' } },
        { test: /\.eot$/, loader: 'file-loader' }
    ]

But the better way is to use Angular-cli, modifying just one parameter :

 "styleExt": "scss"

Upvotes: 1

Related Questions