I tried updating my project to angular 8.0.0 today and I ran into an issue with bootstrap where I can't find a solution.
I use bootstrap 4.3.1
when I do ng serve, I get this error:
ERROR in ./node_modules/bootstrap/scss/bootstrap.scss (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./node_modules/bootstrap/scss/bootstrap.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#each $color, $value in $colors {
^
Undefined variable.
╷
3 │ #each $color, $value in $colors {
│ ^^^^^^^
╵
node_modules/bootstrap/scss/_root.scss 3:27 #import
stdin 11:9 root stylesheet
in ./node_modules/bootstrap/scss/_root.scss (line 3, column 27)
In my angular.json, I have this (I just included the parts relevant for scss):
"schematics": {
"#schematics/angular:component": {
"style": "sass"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
"styles": [
"./node_modules/bootstrap/scss/bootstrap.scss",
"./node_modules/c3/c3.css",
"./node_modules/#fortawesome/fontawesome-free/css/all.css",
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"./src/styles/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"scripts": [],
"es5BrowserSupport": true
},
From what I understand of the error, it is due to the fact that global scss variable are not availables, in "./node_modules/bootstrap/scss/bootstrap.scss", it looks like this:
#import "functions";
#import "variables";
#import "mixins";
#import "root";
#import "many_other_stuff"
The $colors variable is defined in "variables", so it should be available within "root".
Any idea what I'm doing wrong here ?
It should be scss instead of sass :
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
Thanks
Please see this Stackblitz and compare your package.json, angular.json (and other relevant files) to see if you missed installing some dependency. This Stackblitz has angular 8.0.0 and uses bootstrap 4.3.1
https://stackblitz.com/edit/angular-gkx8zp?file=package.json
https://stackblitz.com/edit/angular-gkx8zp?file=angular.json
You need to add these in package.json to install bootstrap and use scss versionof it with angular 8.0
"bootstrap": "4.3.1",
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.7",
"node-sass": "4.7.2",
Related
Hi,
I'm trying to build an app using Tailwind and NextJs with some style in SCSS. Everything was working find and I was tweaking some Tailwind class in my components until the app suddenly crashed with this message
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./styles/globals.scss
TypeError: Cannot read properties of undefined (reading '5')
It appeared just like this, it worked for 3 hours and then just stopped, I did not changed any config files or anything else. I don't understand. After some time looking trough my code I've found that if I remove these import at the top of my global.scss the app works fine, but I don't know where this undefined variable is..
#tailwind base;
#tailwind components;
#tailwind utilities;
here is my tailwind config
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {
spacing: {
'2/3': '66.666667%',
},
colors: {
'lavander-grey': '#625F63',
'lavander-indigo': '#9893DA'
},
},
},
variants: {
extend: {},
},
plugins: [],
};
package.json
"engines": {
"node": ">=14.0"
},
"engineStrict": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"graphql": "^16.6.0",
"graphql-request": "^5.0.0",
"html-react-parser": "^3.0.4",
"moment": "^2.29.4",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-multi-carousel": "^2.8.2",
"sass": "^1.56.1",
"swr": "^1.3.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"eslint": "^8.27.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "13.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4"
Postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
thanks for your help
I've tried to install some older Tailwind packages, wiped node_modules, made sure this was not my components the culprit, tried some Tailwind configurations,started a fresh dev server, did some intense googling
Tailwind is no longer using PurgeCSS under the hood with the release of their JIT compiler as of Tailwind 3.0.
Update the first line of your config to:
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
As shown in the docs, and be sure to include a postcss.config.js file.
In order to write those:
#tailwind base;
#tailwind components;
#tailwind utilities;
you need to install postcss. 'postcss` is like webpack, uses plugins and evaluates them to modern CSS syntax that browser understand
npm install -D tailwindcss postcss autoprefixer postcss-nesting
Then you should have postcss.config.js and have this config:
module.exports = {
plugins: ["tailwindcss", "postcss-nesting", "autoprefixer"],
};
I am trying to compile my ES6+ code to vanilla js using Grunt task runner.
I have purposely chosen Grunt over webpack and gulp because I just wanted to minify my js files.
I have successfully compiled my ES6 code to vanilla after running the code got an error saying generatorRuntime is not defined. After analysing the issue I could that my async and await code is giving the issue after it gets converted to vanilla js.
I have my code snippet of my gruntfile.js and package.json.
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
"expand": true,
"cwd": "./htdocs/js/src",
"src": ["**/*.js"],
"dest": "./htdocs/js/compiled/",
"ext": ".js"
}]
}
},
//uglify will minify all the js files in js/src folder.
uglify: {
all_src : {
options : {
sourceMap : true
},
files: [{
expand: true,
flatten: true,
cwd:'./htdocs/js/compiled',
src: '**/*.js',
dest: './htdocs/js/dist',
ext: '.min.js'
}]
}
}
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
Package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-latest": "^6.24.1",
"grunt": "^1.1.0",
"grunt-babel": "^7.0.0",
"grunt-cli": "^1.3.2",
"grunt-contrib-uglify": "^4.0.1"
},
"babel": {
"presets": [
"latest"
]
}
That's probably because the polyfills aren't getting shipped in your bundle. In your babel.options object inside Gruntfile, you can set
presets: [['#babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]]
and don't forget to include corejs as dependency in your project.
npm install core-js --save
In my nuxt project I added scss support with command
npm i -D #nuxtjs/style-resources sass-loader node-sass
components/scss/_variables.scss has :
and created file components/scss/main.scss with lines:
$link_color: #246647;
$action_color: #3f5e5d;
.title {
//background-color: green !important; // IF TO UNCOMMENT THIS LINE IT IS APPLIED
background-color: $link_color !important; // THESE 2 LINES ARE NOT APPLIED
color: $action_color !important;
}
in nuxt.config.js :
modules: ['#nuxtjs/style-resources'],
styleResources: {
scss: [
'components/scss/_variables',
'components/scss/main.scss', //components/scss/main.scss
]
},
build: {
extend (config, ctx) {
}
}
package.json :
{
"name": "ntasks",
"version": "1.0.0",
"description": "My stylish Nuxt.js project",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.9.0",
"#nuxtjs/moment": "^1.4.0",
"moment-timezone": "^0.5.27",
"nuxt": "^2.0.0",
"store": "^2.0.12",
"vee-validate": "^3.2.1"
},
"devDependencies": {
"#nuxtjs/style-resources": "^1.0.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0"
}
}
How correct to apply values from _variables.scss ?
Thanks!
I have very small hello world SCSS project as follows:
index.html
<h1 class="heading-primary">Hello world!</h1>
sass\main.scss
#import "base/typography"; //Line A
#import "abstract/variable";
sass/abstract/_variable.scss
$color-white: #fff;
$color-black: #000;
$color-red: red;
sass/base/_typography.scss
.heading-primary {
color: $color-red;
}
package.json
{
"name": "starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile":"node-sass ./sass/main.scss css/style1.css -w"
},
"author": "sandeep",
"license": "ISC",
"devDependencies": {
"node-sass": "^4.7.2"
}
}
Now if I run npm run compile, SASS does not compile and just shows this message
> starter#1.0.0 compile C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test
> node-sass ./sass/main.scss css/style1.css -w
However, if I comment Line A in main.scss, SASS works perfectly file
=> changed: C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\sass\main.scss
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\css\style1.css
Now if I uncomment Line A from main.scss I get this error:
{
"status": 1,
"file": "C:/Users/sandgup3/Desktop/NodeBook/advanced-css-course/Natours/test/sass/base/_typography.scss",
"line": 3,
"column": 10,
"message": "Undefined variable: \"$color-red\".",
"formatted": "Error: Undefined variable: \"$color-red\".\n on line 3 of sass/base/_typography.scss\n>> color: $color-red;\n ---------^\n"
}
Also, if I directly import _variables.scss into _typography.scss, SASS compiles fine.
Can someone help debug this?
I have uploaded the file to GitHub for reference:Link
It's very simple. You're importing the partials in the wrong order. Import the variables first (always), then the rest of the partials that make use of the variables.
sass\main.scss
#import "abstract/variable";
#import "base/typography";
PS: The file should be called variables (plural).
I am trying to compile scss file using the grunt-contrib-sass plugin (with grunt v0.4.0). The compiled result is an empty css file. Below are the base.scss, Gruntfile.js and package.json files.
base.scss
$color: #000;
header{
color: $color;
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: { style: "expanded", trace: true },
files: { "base.css": "base.scss" }
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
// Default task.
grunt.registerTask("default", [""]);
grunt.registerTask("sass--",["sass"]);
};
package.json
{
"name": "my_grunt",
"version": "1.0.0",
"description": "New to Grunt",
"main": "index.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "none"
},
"keywords": [
"none"
],
"author": "none",
"license": "BSD",
"devDependencies": {
"grunt-contrib-sass": "~0.2.2"
}
}
Result:
Either I run the sass command "grunt sass" or "grunt sass--", the result is just an empty css file without any errors.
Your help is greatly appreciated
Niusaul
If you haven't installed Grunt globally, you'll either do that or add Grunt as a dependency. Otherwise Grunt won't work.
To install Grunt globally run npm install -g grunt-cli in your Terminal or add as a "devDependency":
"devDependencies": {
"grunt": "0.4.x",
"grunt-contrib-sass": "0.7.x",
}
Edit:
While searching on Google about this problem, I stumpled upon a reported bug on Github from the same user where his problem is solved. Just for everyone who may experienced the same problem, this was his solution:
The error is caused by the manual config that I've set in the Command
Processor (Windows registry), from which I've added an autorun to
change the default command prompt.