i'm starting in a new project using SASS for the first time,
i was able to run npm install successfully.
but when i try to run npm run watch
i'm always getting errors of undefined variables, like this one:
{
"status": 1,
"file": ".../node_modules/bootstrap/scss/_grid.scss",
"line": 15,
"column": 5,
"message": "Undefined variable: \"$enable-cssgrid\".",
"formatted": "Error: Undefined variable: \"$enable-cssgrid\".\n on line 15 of node_modules/bootstrap/scss/_grid.scss\n from line 12 of scss/bootstrap.scss\n from line 4 of scss/style.scss\n>> #if $enable-cssgrid {\n\n ----^\n"
}
the file that the error refers to:
#if $enable-cssgrid {
.grid {
display: grid;
grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
#include make-cssgrid();
}
}
hope some can help
Related
In a Nuxt project i have created a button component with the following style:
<style lang="scss">
.my-button {
// lots of cool styles and stuff here
$height: 28px;
height: $height;
border-radius: $height / 2;
}
</style>
The problem is the border-radius: $height / 2; line gives this warning:
╷
182 │ border-radius: $height / 2;
│ ^^^^^^^^^^^
╵
components/MyButton.vue 182:20 button-size()
components/MyButton.vue 186:5 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass
2.0.0.
Recommendation: math.div($height, 2)
It also links to this page describing the deprecation.
However if i add #use "sass:math" to the top of my style tag like so:
<style lang="scss">
#use "sass:math";
//Cool styles and stuff
$height: 28px;
height: $height;
border-radius: math.div($height, 2);
</style>
I get this error:
[Vue warn]: Error in render: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 12:13:59
SassError: #use rules must be written before any other rules.
╷
102 │ #use "sass:math";
│ ^^^^^^^^^^^^^^^^
╵
components/MyButton.vue 102:1 root stylesheet"
I think i need to add the import of #use "sass:math" somewhere in nuxt.config.js file to load it in all components or similar, but i am not able to figure out where.
The css related blocks in my nuxt.config.js currently looks like:
build: {
postcss: {
plugins: {
'postcss-easing-gradients': {},
},
},
},
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
},
css: [
'~/assets/base.scss',
'~/assets/reset.scss',
],
Updating #nuxtjs/style-resources to above version 1.1 and using hoistUseStatements fixed it.
I changed the styleResources object in nuxt.config.js to:
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
hoistUseStatements: true,
},
and added #use "sass:math"; to the top of global-inject.scss.
Updated answer
What if you try this in your nuxt.config.js file?
{
build: {
loaders: {
scss: {
additionalData: `
#use "#/styles/colors.scss" as *;
#use "#/styles/overrides.scss" as *;
`,
},
},
...
}
Or you can maybe try one of the numerous solutions here: https://github.com/nuxt-community/style-resources-module/issues/143
Plenty of people do have this issue but I don't really have a project under my belt to see what is buggy. Playing with versions and adding some config to the nuxt config is probably the way to fix it yeah.
Also, if it's a warning it's not blocking so far or does it break your app somehow?
Old answer
My answer here can probably help you: https://stackoverflow.com/a/68648204/8816585
It is a matter of upgrading to the latest version and to fix those warnings.
I have a Nuxt app and I want to use the CSS pre-processor.
I installed the sass-loader fibers dependencies, but after installation, a message appears in the application console, which I presented in the image and in the code
This is code err:
WARN webpack#5.49.0 is installed but ^4.46.0 is expected 17:22:44
WARN sass-loader#12.1.0 is installed but ^10.1.1 is expected
Rule can only have one resource source (provided resource and test + include + exclude) in { 17:22:46
"use": [
{
"loader": "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"/home/sergey/all_project/pro_projects_all_language/empty/node_modules/#nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-29[0].rules[0].use[0]"
}
]
}
"use": [
{
"loader": "node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"node_modules/#nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-29[0].rules[0].use[0]"
}
]
}
at checkResourceSource (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)
at node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (node_modules/#nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23)
at node_modules/#nuxt/webpack/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (node_modules/#nuxt/webpack/node_modules/webpack/lib/Watching.js:41:32)
at node_modules/#nuxt/webpack/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:529:11)
I tried reinstalling dependencies, reinstalling a completely clean Nuxt application, and still the problem remains.
To install SASS in Nuxt, you have to run yarn add -D sass sass-loader#10.1.1 (or npm i -D sass-loader#10.1.1 --save-exact && npm i -D sass).
The version of sass-loader needs to be exact and set at the latest 10.x.x because the next one (11.0.0) is using Webpack5, hence being a breaking change because Nuxt2 is only running on Webpack4 as shown here: https://github.com/webpack-contrib/sass-loader/releases
IF then, you still cannot use <style lang="sass"> in your .vue components, then proceed.
Add this to your nuxt.config.js file
export default {
build: {
loaders: {
sass: {
implementation: require('sass'),
},
scss: {
implementation: require('sass'),
},
},
}
}
Here is a working repo with the latest recommended sass (dart-sass) setup working properly with this kind of code
<template>
<div>
<span class="test">
Hello there
</span>
</div>
</template>
<style lang="sass" scoped>
div
.test
color: red
</style>
PS: if SASS is properly installed, then SCSS is working as good because it's basically the same thing.
If you have some warning on some things being deprecated like / for divison or any listed here: https://sass-lang.com/documentation/breaking-changes
You can refer to this answer for a fix: https://stackoverflow.com/a/68648204/8816585
kissu's answer worked for me, but not right away. Finally I managed to fix the problem by downgrading the loader also followed by removing and installing again nuxt.
If you had solve this type of issue then give some solutions..
=> changed: C:\Users\DELL\Desktop\NA-TOURS\sass\main.scss
{
"status": 1,
"file": "C:/Users/DELL/Desktop/NA-TOURS/sass/abstracts/_variables.scss",
"line": 26,
"column": 1,
"message": "Invalid CSS after \"$default-font-size\": expected 1 selector or at-rule, was \": 1.6rem;\"",
"formatted": "Error: Invalid CSS after \"$default-font-size\": expected 1 selector or at-rule, was \": 1.6rem;\"\n on line 26 of sass/abstracts/_variables.scss\n from line 3 of sass/main.scss\n>> $default-font-size: 1.6rem;\r\n ^\n"
}
I've come across this error message when I run "stencil start". Any advise?
{ Error: components\stencil\maintenanceNotice\component.scss doesn't exist!
at options.error (C:\Users\AppData\Roaming\npm\node_modules\#bigcommerce\stencil-cli\node_modules\#bigcommerce\node-sass\lib\index.js:277:32)
formatted: 'Error: components\\stencil\\maintenanceNotice\\component.scss doesn\'t exist!\n on line 160 of components/components.scss\n>> #import "stencil/maintenanceNotice/component";\n --------^\n',
message: 'components\\stencil\\maintenanceNotice\\component.scss doesn\'t exist!',
column: 9,
line: 160,
file: 'components/components.scss',
status: 1 }
I'm learning how to use React, and in turn use Karma as the test runner. I'm running Karma with browserify / reactify (mocha+kai). Whenever I run npm test, I get the following error:
ERROR [framework.browserify]: bundle error
ERROR [framework.browserify]:
/Users/user/Projects/example-d3-react/src/d3Chart.less:1
.d3 {
^
ParseError: Unexpected token
ERROR [karma]: [TypeError: Not a string or buffer]
This happens on all LESS files in the project. I have tried adding a LESS preprocessor to the karma.conf like so:
preprocessors: {
'src/*.less': ['less'],
'tests/**/*.js': ['browserify']
},
browserify: {
debug: true,
transform: [ 'reactify' ]
},
lessPreprocessor: {
options: {
paths: ['src'],
save: true,
rootpath: './'
},
additionalData: {
modifyVars: {
'bodyColor': 'grey',
'secondBoxColor': 'blue'
},
globalVars: {
'globalBoxColor': 'red'
}
},
transformPath: function(path) {
console.log("transforming");
return path.replace(/\.less$/, '.compiled.css');
}
},
Add the preprocessor explicitly to the config: plugins: ['karma-less-preprocessor']
None of the suggested answers helped me, but in case anyone is experiencing this problem, the solution that worked for me is just adding the project-specific less transform to the package.json file. E.g:
{
...
"browserify": {
"exclude": "*.spec.js",
"transform": [
"node-lessify",
"browserify-ng-html2js"
]
},
...
}
Build broke when doing this, since I was using the cmd line transform when building application through NPM. Removed the cmd line transform part since the package.json transform will apply the transform programmatically, and now it works again.