Dec 6, 2020

Level 1

Laravel NPM run Dev error "Can't find stylesheet to import."

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import.

@import "~compass/css3";

I already installed compass and compass-mixins. npm i compass and ``` npm i compass-mixins````

the dependencies are all updated well

    "dependencies": {
        "compass": "^0.1.1",
        "compass-mixins-fixed": "^1.0.1"
    }

and I also put some change in my webpack.mix.js just like the Laravel documentation

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/christmasLand.scss', 'public/css');

I tried to import this

@import "~compass-mixins/lib/compass/css3";

and this

@import "compass/css3";

both doesn't change the error msg.

please help.

thinkverse

5 years ago

Level 15

Looking at the compass package, it isn't a stylesheet, it's a middleware for node.js.

Compass wrapper and middleware for node.js.

README me of compass package.

And the compass itself is a ruby gem it seems.

So I don't get what you're trying to import? 🤔 I could be missing something.

obink

5 years ago

Level 1

@thinkverse I honestly don't know what am I doing. I found some crazy cute HTML style and want to modify it a bit. But then I can't call scss normally in Laravel. So I did some googling and found out about how to using laravel mix and everything.

and this compass/css3 is something they import at the top of the scss page.

maybe, how to use scss in laravel is the real question?

thinkverse

5 years ago

Level 15

You are compiling sass when calling .sass('resources/sass/app.scss', 'public/css') inside mix. The sass method will interpret any sass files and compile them into CSS. 🙂

For more information, I recommend looking at the documentation for compiling assets with SASS.

obink

5 years ago

Level 1

I still trying to understand here.

so you mean the method I did totally wrong?

should I go separately then?

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix .sass('resources/sass/christmasLand.scss', 'public/css');

thinkverse

5 years ago

Level 15

No need, they can be chained as you have before.

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/christmasLand.scss', 'public/css');

obink

5 years ago

Level 1

and why is it failed when I did npm run dev?

obink

5 years ago

Best Answer

Level 1

I think I found a way in.

set two files, 1 is yourStyle.css and the other is yourStyle.scss
the css is keep in public/css, and the scss keep it in resource/sass
use this link for mapping a guide
installing compass-mixins from here
the import should be taken from your node_module
@import '../../node_modules/compass-mixins/lib/compass/_css3.scss'

after all is done the next step is setting up your webpack.mix.js, put every things you need in chain

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/yourStyle.scss', 'public/css');

lastly npm run dev

Please or to participate in this conversation.