Loader not working

[essekia]

Hey,

I can't seem to get the loader to work.

ERROR in ../~/css-loader!../~/sass-loader!../~/style-loader!../~/css-loader!../~/resolve-url-loader!../~/sass-loader?sourceMap!../assets/stylesheet/style.scss
Module build failed: 
@import '../../node_modules/react-datepicker/docs/src/style.scss';
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "content = requi..." in /assets/stylesheet/style.scss (line 1, column 1)

these are the first lines of style.css:

@import '../../node_modules/react-datepicker/docs/src/style.scss';
@import 'partials/base.scss';

And, I included this in my webconfig loader:

{
            test: /\.css$/,
            loaders: ['style', 'css', 'resolve-url']
        }, {
            test: /\.scss$/,
            loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
        }

Any thoughts?

[bholloway]

@essekia This is a weird problem. It looks like your css is going through the loader chain twice:

ERROR in ../~/css-loader!../~/sass-loader!../~/style-loader!../~/css-loader!../~/resolve-url-loader!../~/sass-loader?sourceMap!../assets/stylesheet/style.scss

I have absolutely no idea why that might be.

The only thing I can see is where you import from node_modules here:

@import '../../node_modules/react-datepicker/docs/src/style.scss';

You would normally use the tilde ~ syntax to resolve from any of your libraries, including node_modules:

@import '~react-datepicker/docs/src/style.scss';

Could you please try that syntax and see if it makes any different.

[bholloway]

Hey @essekia how did you go with this problem?

[kushwahashiv]

I am getting following error in webpack while using v1.4.3

./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/source-map-loader!./~/source-map-loader!./~/bootstrap-loader/no-op.js resolve-url-loader cannot operate: CSS error .../node_modules/bootstrap-loader/no-op.js:8153:29: @keyframes missing '{' at error (.../node_modules/css/lib/parse/index.js:62:15)

[bholloway]

Looks like there is a CSS error I'm the file you are loading.

Is there some reason you are loading a JS file with a CSS loader chain?

[kushwahashiv]

@bholloway No. Actually, I'm using bootstrap, which has JS + SASS file in to the package. Webpack is using bootstarp-loader to load bootstrap-saas+js and compiles that into css and it is encountering that error. Not sure, if fix belongs to bootstrap-loader

[bholloway]

@kushwahashiv have you had any luck with this?

If you can make a simple open-source project that exhibits the problem then maybe I can debug.

This has worked well previously. Plus it helps you in the future because I will test your use-case whenever I republish the package.

[kushwahashiv]

@bholloway No, it still persist but do not block execution. It will be good we eliminate it from the webpack build warning list. sure, I will try to create a sample so that you can reproduce at your end and if it is an issue you can help in resolving it.

I'll update here once sample is ready.

[bholloway]

Hey @kushwahashiv. I think someone may have previously submitted me this use case.

Take a look at sass-rel-paths-issue and let me know if it is anything like your use-case.

If it answers your question all the better. Otherwise your could fork it, or copy heavily from it, and get a quick example going.

[kushwahashiv]

Hi @bholloway, thanks a lot for taking effort to share the sample. it is different so I created my own sample but unfortunately I couldn't able to reproduce it within the sample. I will give another try as it still persist with my original big app.

[bholloway]

Hey @essekia and @kushwahashiv. How are you going with this?

[Lutando]

I just ran into this problem as well, no clue how to fix it. My production.js file has 3 lines which are just requires.

require('styles/main.scss'); & require('scripts/main');

ERROR in ./src/styles/main.scss
Module build failed: ModuleBuildError: Module build failed:

^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in F:\Development Workspace\SandBox\myproj\src\styles\main.scss (line 1, column 1)
    at F:\Development Workspace\SandBox\myproj\node_modules\webpack\lib\NormalModule.js:137:35
    at F:\Development Workspace\SandBox\myproj\node_modules\loader-runner\lib\LoaderRunner.js:359:11
    at F:\Development Workspace\SandBox\myproj\node_modules\loader-runner\lib\LoaderRunner.js:225:18
    at context.callback (F:\Development Workspace\SandBox\myproj\node_modules\loader-runner\lib\LoaderRunner.js:106:13)
    at Object.onRender (F:\Development Workspace\SandBox\myproj\node_modules\sass-loader\index.js:272:13)
    at Object.<anonymous> (F:\Development Workspace\SandBox\myproj\node_modules\sass-loader\node_modules\async\dist\async.js:2234:31)
    at apply (F:\Development Workspace\SandBox\myproj\node_modules\sass-loader\node_modules\async\dist\async.js:20:25)
    at Object.<anonymous> (F:\Development Workspace\SandBox\myproj\node_modules\sass-loader\node_modules\async\dist\async.js:56:12)
    at Object.callback (F:\Development Workspace\SandBox\myproj\node_modules\sass-loader\node_modules\async\dist\async.js:840:16)
    at options.error (F:\Development Workspace\SandBox\myproj\node_modules\node-sass\lib\index.js:275:32)
 @ ./src/production.js 5:0-27

[bholloway]

@Lutando This issue AngularClass/angular2-webpack-starter#316 implied that adding the to-string-loader same error with PostCSS. I don't understand it but might be worth a try.

[lajosbencz]

I ran into the same issue today with VueJS 2. Removing the explicit scss loader chain from the webpack config solved it for me.

[bholloway]

It looks like your css is going through the loader chain twice

Removing the explicit scss loader chain from the webpack config solved it for me.

Imagine there are css imports in one of the scss files? In that case does sass-loader pass those imports through webpack first?

[bholloway]

Looks to me that this is a Webpack configuration problem. Especially since @kushwahashiv's sample project doesn't exhibit the problem.

I will tag it with something to show it is not a bug. OR I will close it. OR both.

I think it is constructive to discuss. So please continue to ask questions or add information here while it helps you.

[bholloway]

I'm tempted to close this unless anyone has anything new to add. Please let me know.

[a1029563229]

@mixin borderBottom($size, $color) { ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in F:\plugins\mallshopping\src\assets\css\sass\common.scss (line 1, column 1)

my code @mixin borderBottom($size, $color) { &:after { content: ""; box-sizing: border-box; position: absolute; width: 100%; left: 0; bottom: 0; border-bottom: $size solid $color; @media screen and (-webkit-min-device-pixel-ratio: 3) { transform: scaleY(0.33333); } @media screen and (-webkit-min-device-pixel-ratio: 2) { transform: scaleY(0.5); } } } $topicColor: #87C212; This is my loader configuration { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] }

I didn't introduce it anywhere else, I didn't even use it, but there's no other way to do it, thanks, and tell me what to do @bholloway

[bholloway]

Based on your loader config are you using this loader?

[bholloway]

I'm going to close this issue due to age and the focus drifting. I encourage you to open a new issue on anything not resolved here.

Please refer to #97 as version 3 may help any open issues.