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.
Related
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
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",
I'm new to Grunt and am following this tutorial.
I'm having a heck of a time trying to get Grunt to compile Sass. I keep getting the following when I run grunt sass:
Loading "sass.js" tasks...ERROR
>> SyntaxError: Unexpected token (
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
node: v6.11.0,
npm: v6.4.1,
grunt cli: v1.3.2
package.json:
{
"name": "yb",
"version": "1.0.0",
"description": "yb site build",
"main": "src/js/main.js",
"dependencies": {},
"devDependencies": {
"grunt": "^1.0.3",
"grunt-contrib-concat": "^1.0.1",
"grunt-sass": "^3.0.2",
"node-sass": "^4.10.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Scott",
"license": "ISC"
}
Gruntfile.js
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
concat: {
js: {
src: ['src/**/*.js'],
dest: 'assets/js/main.js'
},
css: {
src: ['src/**/*.css'],
dest: 'assets/css/main.css'
}
},
sass: {
build: {
files: [{
src: 'src/sass/test.scss',
dest: 'assets/css/test.css'
}]
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
// Register Tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
};
The grunt-sass docs give a different configuration (which I've also tried), but I still can't get it to compile.
As far as I know, everything is installed. I can't find where I'm going off the rails here. Any thoughts?
check ruby with ruby -v (install [ruby][1] )
Install Sass with sudo gem install sass (install [sass][2] )
setting for Grunt Tasks & run grunt convert-sass
// Load Grunt
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Tasks
concat: {
js: {
src: ['src/**/*.js'],
dest: 'assets/js/main.js'
},
css: {
src: ['src/**/*.css'],
dest: 'assets/css/main.css'
}
},
sass: {
dist: {
options: {
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'src/sass',
src: ['**/*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
}
});
// Load plugins
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
// Register Tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
grunt.registerTask('convert-sass', 'sass');
};
When I build the ckeditor with ./
./node_modules/.bin/webpack --mode development
Anything works fine, but when I try to build it with
./node_modules/.bin/webpack --mode production
I get this error:
ERROR in ./node_modules/#ckeditor/ckeditor5-utils/src/ckeditorerror.js
Module build failed (from
./node_modules/#ckeditor/ckeditor5-dev-webpack-plugin/lib/translatesourceloader.js):
SyntaxError: Unexpected token (13:19) #
./node_modules/#ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.js
6:0-72 33:13-26 #
./node_modules/#ckeditor/ckeditor5-editor-classic/src/classiceditor.js
# ./app.js ERROR in bundle.js from UglifyJs Unexpected token: keyword
(const)
[./node_modules/#ckeditor/ckeditor5-utils/src/log.js:46,0][bundle.js:160,0]
I can edit the ckeditor file and remove the const word, but then it just errors out on the next file which contains export const.
Her is the uglify-js version I use:
"uglify-js": {
"version": "3.4.9",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
"integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
"dev": true,
"requires": {
"commander": "~2.17.1",
"source-map": "~0.6.1"
}
},
"uglifyjs-webpack-plugin": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.0.1.tgz",
"integrity": "sha512-1HhCHkOB6wRCcv7htcz1QRPVbWPEY074RP9vzt/X0LF4xXm9l4YGd0qja7z88abDixQlnVwBjXsTBs+Xsn/eeQ==",
"dev": true,
"requires": {
"cacache": "^11.2.0",
"find-cache-dir": "^2.0.0",
"schema-utils": "^1.0.0",
"serialize-javascript": "^1.4.0",
"source-map": "^0.6.1",
"uglify-js": "^3.0.0",
"webpack-sources": "^1.1.0",
"worker-farm": "^1.5.2"
}
},
-- Updated --
I kinda fixed it by removing this from webpack.conf.js
optimization: {
minimizer: [
new UglifyJsWebpackPlugin( {
sourceMap: true,
uglifyOptions: {
output: {
// Preserve CKEditor 5 license comments.
comments: /^!/
}
}
} )
]
},
I ran into this too. I switched to terser-webpack-plugin and can build successfully.
https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/362
I am trying to create an angular 2 app
Below is the typescript code
import { Component } from 'angular2/core';
#Component({
selector: 'my-app',
template: ' < h1 > My First SharePoint Add In using Angular2... !!! < /h1>'
})
export class AppComponent { }
It is throwing the below errors
cannot find module angular2/core
Experimental support for decorators is a feature that is subject to change in a future release
For the second error I have also added
"experimentalDecorators": true,
in the tsconfig.json
I have also installed TypeScript SDK for Visual Studio 2017 and restarted Visual studio, but no luck
I also tried npm install -g typescript#latest
Below is my package.json
{
"name": "imageslideshow",
"version": "1.0.0",
"description": "slide show for image libraries",
"main": "index.js",
"dependencies": {
"#angular/core": "^4.3.2",
"angular2": "^2.0.0-beta.17",
"es6-promise": "^4.1.1",
"es6-shim": "^0.35.3",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.6",
"systemjs": "^0.20.17",
"zone.js": "^0.8.16"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "vignesh",
"license": "ISC"
}
When I try npm install I get the below message
Make sure you have run npm install on your project and the
dependencies are available in the node_modules folder.
In your package.json file you have dependencies with both Angular
version 2 and 4. Decide which one you want to use.
If you want to use Angular version 4 your import should be:
import { Component } from '#angular/core';