Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style loader ERROR : Invalid CSS when running via Windows Powershell #66

Open
highglow opened this issue Aug 19, 2016 · 1 comment
Open

Comments

@highglow
Copy link

highglow commented Aug 19, 2016

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).
@cmelion
Copy link
Owner

cmelion commented Aug 27, 2016

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'
            },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants