I am learning native script angular to build mobile and web app. I created a project with the following command
ng new -c=#nativescript/schematics sass-project --shared --style=scss
my node version is 14.15.2
angular version is 11.0.0
and npm version is 6.14.9
When I execute command
tns run android or tns run ios
I am getting the following error
ERROR in ./app.scss Module build failed (from ../node_modules/sass-loader/dist/cjs.js): SassError: Undefined function.
`77 │ $color-brightness: round((red($color) * 299) + (green($color) * 587) + math.div(blue($color) * 114, 1000));
node_modules/#nativescript/theme/scss/mixins/_utilities.scss 77:76 check-contrast()
node_modules/#nativescript/theme/scss/mixins/_utilities.scss 86:49 alternate()
node_modules/#nativescript/theme/scss/variables/_index.scss 56:11 #import
node_modules/#nativescript/theme/scss/core/_index.scss 2:9 #import
node_modules/#nativescript/theme/core.scss 8:9 #import
src/_app-common.scss 1:9 #import
src/app.scss 2:9 root stylesheet
# ../node_modules/#nativescript/webpack/helpers/load-application-css-angular.js 5:49-65 6:47-63
# ./main.tns.ts
I tried to clean the project and rebuild it but still facing the same issue. help appreciated.
Finally, I am able to solve this error by adding the following sass dependencies in package.json
"sass": "1.34.1",
"sass-loader": "10.1.1",
In case, you face any issue to start web then remove node-sass dependency from package.json
Related
When trying to npm install -D cypress-xpath into a Cypress project [require('cypress-xpath') added to my cypress/support/index.js] with the cypress-cucumber-preprocessor already installed I am getting the below Error in the plugins > index.js file for "/// <reference types="cypress" />"?
Cannot find type definition file for 'cypress'.ts(2688)
Added to plugins > index.js file
const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
on('file:preprocessor', cucumber())
}
package.json file
"devdependencies": {
"cypress": "^8.3.1",
"cypress-cucumber-preprocessor": "^4.2.0"
},
"Dependencies": {
"cypress-xpath": "^1.6.2"
}
support > index.js file
require('cypress-xpath')
When running:
npx cypress open
The plugins file is missing or invalid.
Your pluginsFile is set to C:\Users\Delwin\VSCode\Cypress\Cucumber1\cypress\plugins\index.js, but either the file is missing, it contains a syntax error, or threw an error when required. The pluginsFile must be a .js, .ts, or .coffee file.
Or you might have renamed the extension of your pluginsFile. If that's the case, restart the test runner.
Please fix this, or set pluginsFile to false if a plugins file is not necessary for your project.
Error: Cannot find module 'cypress-cucumber-preprocessor'
My problem was solved by installing latest cypress types
npm i -D #types/cypress#latest
I had same error and I fixed by installing cypress,
https://docs.cypress.io/guides/getting-started/installing-cypress
I have a nuxt project and migrated 1 month ago to vuetify 2.0 from vuetify 1.5. Everything has worked perfectly for development after yarn generate or yarn build. However, when I decided to publish the project, I got errors related to sass loader after yarn generate.
I tested nuxt project with vuetify 2 and got different errors about sass loader.
I wonder if there is any problem, how it worked in development, and what is exactly happening in build or generate command that the errors were thrown. What should I do to resolve the issue?
I think I found the origin of the error: In nuxt-config.ts, the file that I have in
styleResources: {
scss: ['#/assets/sass/variables.scss']
},
includes:
#import 'responsiveStyle';
$bg-color: white !important;
$primary-color: #1caefa !important;
$accent-color: #6c7293 !important;
I get this error: https://ibb.co/H7VvRVt
If I remove #import 'responsiveStyle, this error would raise:
https://ibb.co/KVQ08S9
This is a sample project including the error after yarn-generate command: https://github.com/nargesmomenyan/nuxt-vuetify2
Go to this link
and see what you have to do to successfully migrate from 1.5 to 2,
there has been a lot of changes already.
See here
The problem was related to the #nuxtjs/style-resources module according to this issue:
https://github.com/nuxt-community/vuetify-module/issues/82
I upgraded this module to version 1.0.0 and the error went away.
I'm trying to build JS Client and JVM server kotlin project generated by IntelliJ IDEA.
Getting error:
[...]\node_modules\.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
Found that it's common problem with npm and webpack on Windows and could be fixed by editing package.json file.
Webpack unable to bundle due to SyntaxError
Problem that package.json is generated by build itself and I don't know how to apply this fix in my situation.
Looks that it should be applied somewhere around this code in build.gradle:
jvmJar {
dependsOn(jsBrowserWebpack)
from(new File(jsBrowserWebpack.entry.name, jsBrowserWebpack.outputPath))
}
Issue was fixed in recent kotlin plugin version for idea - 1.3.50
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?
If you have compass library installed inside node_modules directory you can try to import it like this:
#import "~compass/css3";
If it's doesn't help you can try to modify sass includePaths config variable (laravel mix has a third option to pass additional config):
mix.sass('resources/assets/sass/main.scss', 'public/main/css', {
includePaths: [path.resolve(__dirname, './relative/path/to/compass')]
});
I have implemented Laravel-Mix in my application and copying files from node_module to my assets folder and than compiling my scss. Since the copying process is slow my scss is not able to find the dependent libraries.
Is there a way to delay the sass build and trigger it after copying task has completed?
Here is my webpack
let mix = require('laravel-mix');
mix.copy('node_modules/ionicons', 'resources/assets/css/libs/ionicons')
mix.sass('resources/assets/css/sass/app.scss', 'public/dist');
Below is my app.scss
#import '../libs/ionicons/dist/css/ionicons';
#import 'header';
Here is the error I am getting
95% emitting ERROR Failed to compile with 2 errors7:38:04 PM
error in ./resources/assets/css/sass/app.scss
Module build failed:
#import '../libs/ionicons/dist/css/ionicons';
^
File to import not found or unreadable: ../libs/ionicons/dist/css/ionicons.
Use tilda importer.
Webpack recognize ~ as projectRoot/node_modules
app.scss
#import '~ionicons/dist/css/ionicons.css';
#import 'header';
or much better to import sass version, to make it more flexible.
app.scss
$ionicons-font-path: '~/ionicons/dist/fonts'; //change path to ionicon font
#import '~ionicons/dist/scss/ionicons';
#import 'header';
webpack.mix.js
let mix = require('laravel-mix');
mix.sass('resources/assets/css/sass/app.scss', 'public/dist');