generator-ng2-webpack icon indicating copy to clipboard operation
generator-ng2-webpack copied to clipboard

Style loader ERROR : Invalid CSS when running via Windows Powershell

Open highglow opened this issue 9 years ago • 1 comments

Hi there,

After a clean install of the generator: I am getting the following error when the style loader is processing ALL SCSS files.

  • /src/style/app.scss
  • /src/app/style.scss

Environment: Windows 10, Powershell 5. Issue does not present when running from vanilla CMD prompt.

Obviously not a show stopper, just would like to know what is going on here. ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader!./~/raw-loader!./~/postcss-loader!./~/sass-loader!./src/style/app.scss Module build failed: // styles in src/style directory are applied to the whole page body { background: #0147A7; color: #fff; margin: 0; padding: 0; } a { color: #03A9F4; } ^ Invalid CSS after "module.exports": expected "{", was '= "body {\\n backgr' in C:\git\ng2-webpack\src\style\app.scss (line 1, column 15) @ ./src/style/app.scss 4:14-303 13:2-17:4 14:20-309

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/37080719-style-loader-error-invalid-css-when-running-via-windows-powershell?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

highglow avatar Aug 19 '16 01:08 highglow

I'm not 100% clear on why it fails in powershell and not from the CMD prompt, however one interesting clue is:
// styles in src/style directory are applied to the whole page

This style of comment is not handled by postcss and will produce an error. I'll make some changes to the way the scss/css files are included and the order that postcss is applied and we can see if that helps in your scenario.

Essentially, scss should be included without the loader annotations in the source and the loaders should be applied in the correct sequence in webpack config.

/* istanbul ignore next */
if (__WEBPACK__) {
    require('./style.scss');
}
       loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader'
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            },

cmelion avatar Aug 27 '16 12:08 cmelion