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?
Related
Can anyone help with this gulp-sass error.
I'm trying to run Google's code labs which includes package gulp-sass.
[01:02:31] 'build:scss' errored after 117 ms
[01:02:31] Error in plugin "gulp-sass"
Message:
app/styles/_categories.scss
Error: Expected identifier.
╷
50 │ %bg-#4285f4{
│ ^
╵
app/styles/_categories.scss 50:8 codelab-card()
app/styles/_categories.scss 79:1 #import
app/styles/_codelab-card.scss 18:9 #import
app/styles/main.scss 22:9 root stylesheet
Details:
formatted: Error: Expected identifier.
╷
50 │ %bg-#4285f4{
│ ^
I also encountered this problem when trying to run gulp-sass to serve the Google Codelabs example site
The problem
The sass interpolation syntax in line 50 looks like this:
%bg-#{$color}
Which unwraps $color inplace, yielding
.bg-#XXXXXX
Notice that the character '#' is an invalid indentifier in css
The fix
Convert the color to a string and then strip out the hex value (As explained in this answer)
$stripped-color: str-slice(inspect($color), 2);
%bg-#{$stripped-color} {
background-color: $color;
}
...
I am trying to install all the dependencies of a Laravel Vue Project.
From the Instruction, it says I need to run npm run dev.
Now when I run this I am receiving
> ERROR in ./resources/js/src/#core/scss/vue/libs/toastification.scss
> (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./node_modules/sass-loader/dist/cjs.js??ref--11-0!./resources/js/src/#core/scss/vue/libs/toastification.scss)
> Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
> SassError: Undefined function. ╷ 63 │ margin-left:
> -(math.div($vt-toast-max-width, 2)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵
> node_modules/vue-toastification/src/scss/_toastContainer.scss 63:22
> #import resources/js/src/#core/scss/vue/libs/toastification.scss
> 25:9 root stylesheet #
> ./resources/js/src/#core/scss/vue/libs/toastification.scss 2:14-314 #
> ./resources/js/src/libs/toastification.js #
> ./resources/js/src/main.js # ./resources/js/app.js # multi
> ./resources/js/app.js ./resources/scss/app.scss
I have searched to solve this problem and some people suggested that in the package-lock.json file there are sass dependencies where I need to provide a resolved link to it. But when I check my sass package I found this -
"sass": {
"version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
},
Now I have no idea where to look and how to solve this problem!
Any IDEA???
try to delete everything in toastification.scss and if it works, then you're having just a syntax error
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'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.
I have started a Laravel 5.3 project with Zurb Foundation (sass) a while ago. I configured gulpfile.js to compile my sass and it used to work properly until today where it stopped compiling. It worked a couple days ago.
I did not touch the code or upgrade anything in between...
Error:
MBP-Nicolas:v1 nicolas$ gulp
[15:50:09] Using gulpfile ~/Documents/Developpement/PHP/Laravel/Project/v1/gulpfile.js
[15:50:09] Starting 'default'...
[15:50:09] Starting 'sass'...
Fetching Sass Source Files...
- resources/assets/sass/app.scss
Saving To...
- public/css/app.css
[15:50:11] Finished 'default' after 1.31 s
[15:50:11] gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/_settings.scss
Error: File to import not found or unreadable: util/util
Parent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss
on line 43 of resources/assets/sass/_settings.scss
>> #import 'util/util';
^
{ [Error: resources/assets/sass/_settings.scss
Error: File to import not found or unreadable: util/util
Parent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss
on line 43 of resources/assets/sass/_settings.scss
>> #import 'util/util';
^
]
status: 1,
file: '/Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss',
line: 43,
column: 1,
message: 'resources/assets/sass/_settings.scss\nError: File to import not found or unreadable: util/util\n Parent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss\n on line 43 of resources/assets/sass/_settings.scss\n>> #import \'util/util\';\n ^\n',
formatted: 'Error: File to import not found or unreadable: util/util\n Parent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss\n on line 43 of resources/assets/sass/_settings.scss\n>> #import \'util/util\';\n ^\n',
messageFormatted: '\u001b[4mresources/assets/sass/_settings.scss\u001b[24m\nError: File to import not found or unreadable: util/util\n Parent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss\n on line 43 of resources/assets/sass/_settings.scss\n>> #import \'util/util\';\n ^\n',
messageOriginal: 'File to import not found or unreadable: util/util\nParent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss',
relativePath: 'resources/assets/sass/_settings.scss',
name: 'Error',
stack: 'Error: resources/assets/sass/_settings.scss\nError: File to import not found or unreadable: util/util\n Parent style sheet: /Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/resources/assets/sass/_settings.scss\n on line 43 of resources/assets/sass/_settings.scss\n>> #import \'util/util\';\n ^\n\n at options.error (/Users/nicolas/Documents/Developpement/PHP/Laravel/Project/v1/node_modules/node-sass/lib/index.js:292:26)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }
[15:50:11] Finished 'sass' after 1.38 s
[15:50:11] Starting 'copy'...
Fetching Copy Source Files...
- node_modules/font-awesome/fonts/**/*
Saving To...
- public/fonts
[15:50:11] Finished 'copy' after 55 ms
[15:50:11] Starting 'styles'...
Fetching Styles Source Files...
- node_modules/font-awesome/css/font-awesome.min.css
- public/css/app.css
Saving To...
- public/css/all.css
[15:50:11] gulp-notify: [Laravel Elixir] Stylesheets Merged!
[15:50:11] Finished 'styles' after 95 ms
[15:50:11] Starting 'scripts'...
Fetching Scripts Source Files...
- node_modules/jquery/dist/jquery.js
- node_modules/foundation-sites/dist/foundation.min.js
- resources/assets/js/main.js
Saving To...
- public/js/all.js
[15:50:12] gulp-notify: [Laravel Elixir] Scripts Merged!
[15:50:12] Finished 'scripts' after 1.3 s
I don't really know what else you need but here is my gulpfile:
var elixir = require('laravel-elixir');
elixir(function(mix) {
//Compilation SASS
mix.sass('app.scss', null, null, { includePaths: ['node_modules/foundation-sites/scss'] });
//Copy of fonts
mix.copy('node_modules/font-awesome/fonts', 'public/fonts');
//Compilation CSS
mix.styles([
'../../../node_modules/font-awesome/css/font-awesome.min.css',
'../../../public/css/app.css'
]);
//Compilation JavaScript
var JSJquery = '../../../node_modules/jquery/dist/jquery.js';
var JSFoundation = '../../../node_modules/foundation-sites/dist/foundation.min.js';
mix.scripts([
JSJquery,
/*JSFoundation + 'foundation.core.js',
JSFoundation + 'foundation.util.keyboard.js',
JSFoundation + 'foundation.util.box.js',
JSFoundation + 'foundation.util.triggers.js',
JSFoundation + 'foundation.util.mediaQuery.js',
JSFoundation + 'foundation.util.motion.js',
JSFoundation + 'foundation.reveal.js',
JSFoundation + 'foundation.offcanvas.js',*/
JSFoundation,
'main.js'
]);
});
Line 43 of _settings.scss is #import 'util/util';.
If it is useful, some versions of the tools:
node -v: v4.6.0
npm -v: 2.15.9
sass -v: Sass 3.4.15 (Selective
Steve)
But like I said, I don't recall upgrading any of it.
Thanks for your help.
According to your gulp file and sass file you should have your util.scss file at location 'node_modules/foundation-sites/scss/util/util.scss' This is because you have the following in your gulp file
mix.sass('app.scss', null, null, { includePaths: ['node_modules/foundation-sites/scss'] });
and the following in your settings file
util/util
Ensure the file is at that location, if not, modify your gulpfile or settings file accordingly.
Edit: Can you post your 'sass' task from your gulpfile, this might help?