All geek questions in one place

Using Webpack with SASS and PostCSS in Angular2

Init

I am trying to use webpack with sass-loader and postcss-loader. I already tried different solutions, but nothing worked as I want it.

I tried the solution from Angular 2 Starter Pack with loader and loader, but not with postcss - the loader did not work.

the code

Angular 2 Component

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls:  ['./app.component.scss']
    // styles: [
    //     require('./app.component.scss')
    // ]
})

webpack module loader

{
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader']
}

Problem

Everything works with these code lines, but styles are added to the tag <head>in the tag <style>. At some point, I will have hundreds of lines of style that I want to avoid.

If I change my bootloader code to this:

loader: ExtractTextPlugin.extract('to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap')

and add this to your webpack configuration

plugins: [
    new ExtractTextPlugin('style.css')
]

this leads to an error

Missed error: expected "styles" should be an array of strings.

The .css style is actually linked in HTML code.

Im , sass, postcss .css .

+4

:

Source: https://habr.com/ru/post/1665272/

More articles:


All Articles