ahmadbadpey's avatar

laravel mix could not compile a scss file contains compass/css3 import

I have a file named main.scs that imported a general.scss file that has at the first line this :

@import "compass/css3";

As you can see I imported compass/css3 to use some predefined mixins.

Of course all of them are in a larvel project. larvel have a built-in Mix library to compile scss and other type files.

Also I wrote these to webpack.mix.js file :

let mix = require('laravel-mix');

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

But when running npm run production command I got this error:

 error  in ./resources/assets/sass/main.scss

Module build failed:
@import "compass/css3";
^
      File to import not found or unreadable: compass/css3.
Parent style sheet: D:/wamp/www/loverspay/resources/assets/sass/_general.scss
      in D:\wamp\www\loverspay\resources\assets\sass\_general.scss (line 1, column 1)

Even I installed compass in the project directory But there is still that problem

What do I do?

0 likes
1 reply
ejdelmonico's avatar

You will need a compass-loader most likely. Webpack does not know what to do with the compass import. This article may help you or give a path to explore if the loader doesn't help. http://browniefed.com/blog/webpack-and-compass/

Remember, you can add config to Laravel Mix and it will perform a deep merge.

Please or to participate in this conversation.