I'm experiencing this error. Can you help me with this. using laravel-mix
mix.sass('resources/assets/sass/main.scss', 'public/css/app.css');
Issue here :
ERROR Failed to compile with 2 errors 9:38:15 AM
error in ./resources/assets/sass/main.scss
Module build failed:
#import "node_modules/bulma/sass/utilities/intial-variables.sass";
^
File to import not found or unreadable: node_modules/bulma/sass/utilities/intial-variables.sass.
Parent style sheet: stdin
error in ./resources/assets/sass/main.scss
Module build failed: ModuleBuildError: Module build failed:
#import "node_modules/bulma/sass/utilities/intial-variables.sass";
I'm not used to using sass, but It is a requirement for me, so that
I can save some time in customizing the app's look and feel. So these
are my customization.
// fonts
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab');
#import "node_modules/bulma/sass/utilities/intial-variables.sass";
#import 'variables.scss';
#import 'node_modules/bulma.sass';
variables.scss
$edgewater : #c0dfd9 ;
$green-white: #E9ECE5;
$submarine: #b3c2bf ;
$tuatara : #3b3a36 ;
$body-background : $submarine ;
$primary : $edgewater ;
$primary-invert : $tuatara;
$family-serif : 'Roboto Slab', 'Open Sans' , 'serif' ;
$text : #tuatara;
$text-light : $green-white ;
$family-primary : $family-serif ;
Try this:
#import "../../../node_modules/bulma/sass/utilities/intial-variables.sass";
Your "import" should be a relative path from the "main.scss" file.
Related
I would like to import scss files from bootstrap in my NX workspace.
I would need to import the /node_modules/bootstrap/scss/functions file in the libs/folderName/components/src/lib/my-component component
In the scss file I have this:
#import "/node_modules/bootstrap/scss/functions";
in the my-app/project.json file:
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap/scss"
]
}
but when I run the application, I get an error on build:
Error in ./libs/folderName/components/src/lib/my-component/my-component.component.scss?ngResource
The module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: cannot find a styleset to import.
╷
2 │ #import "functions
"
│ ^^^^^^^^^^^
How to import bootstrap scss into a library in NX?
I have a file structure like this:
---- _base-map.scss
---- _child-map-1.scss
---- _child-map-2.scss
---- _child-map-3.scss
styles.scss
styles.scss imports all the child map files:
#import './base-map';
#import './child-map-1';
#import './child-map-2';
#import './child-map-3';
So far so good.
_base-map.scss :
$base-map : (
"font-size" : 1.3rem,
"border-radius" : 0.4rem,
// ...
);
In order to use "map.merge", #use "sass:map" has to be included:
_child-map-1.scss :
#use "sass:map";
$child-map-1 : map.merge(
$base-map,
(
"font-size" : 2rem,
"border-radius" : 0.5rem,
// ...
)
);
But when I try to bundle the files with scss-bundle I get this error :
[17:22:37] erro: There is an error in your styles:
[17:22:37] erro: #use rules must be written before any other rules.
[17:22:37] erro: ╷
[17:22:37] erro: 838 │ #use "sass:map";
[17:22:37] erro: │ ^^^^^^^^^^^^^^^
[17:22:37] erro: ╵
[17:22:37] erro: stdin 838:1 root stylesheet on line (838, 1)
When I don't include #use "sass:map" the scss compiler complains about map.merge.
What's the right way to solve this?
Delete theme-style.scss
Open angular.json file and look for-
architect-
build-
styles-
remove this line- "src/custom-theme.scss"
You are all-set!
I had to change "map.merge" to "map-merge" to make it work.
Thanks to #Arkellys.
HTH someone.
I want to add a path prefix in an #import in my main theme.scss file but am getting the error Unexpected interpolation.
(I am using interpolation because the variable is in a string.)
$path-prefix: "../Scss/";
// No error on this
.test::before {
content: "#{$path-prefix}";
}
// But this produces and error
#import "#{$path-prefix}variables";
I am trying to use a mixin with a custom function. But I have always receive the same error.
error sass/app.scss (Line 58 of sass/_grid.scss: Undefined mixin 'responsive-columns'.)
My function is :
#mixin responsive-columns($suffix:''){
#for $i from 1 through $columns{
.col#{$suffix}-#{$i}{
width : $i / $columns*100%;}
}
I found out what was the problem. I think it is a stupid one.
First I have to add :
#import "compass"
in my scss file.
Then in my terminal I have to use
compass watch instead of sass --watch sass_folder:css_folder
My scss file is this:
#import "compass/typography/lists/bullets";
.view-content ul
+no-bullets
This gives me an error on the page:
Syntax error: Invalid css after " +no-bullets": expected "{", was ""
However, when the rule looks like this:
.view-content ul {
#include no-bullets;
}
then it's OK and bullets are gone.
But I like the shorthand notation, how to enable using it?
You're right, I found the related documentation.
I tried the following and it works.
Then, I tried your and it didn't work until I remove the trailing ; on the import instruction.
#import "compass/typography/lists/bullets"
.view-content ul
+no-bullets
The following works with Compass 0.12.2. Try removing the trailing ; on the import instruction.