I am using Grunt to compile my SASS files. Now I need to add animate.css from npm, so I added it with:
$ npm install animate.css --save
But how do I add it to Grunt? I thought, that changing the "sass" configuration by adding "node_modules/animate.css/animate.css" to the array would be enough:
sass: {
dist: {
options: {
style: "compressed",
compass: false
},
files: {
"dist/main.css": ["scss/main.scss", "node_modules/animate.css/animate.css"]
}
}
},
Unfortunately, this doesn't work.
My main.scss file, is just a file sitting next to node_modules directory, so what I could do, is to rename node_modules/animate.css/animate.css into _animate.scss and then #import it in my main.scss, but this seems to be not the proper way of adding styles. This would mean, that every time I need some external styles, I would have to rename them to .scss
This seems to be such a basic thing to do, to import styles from npm, yet I cannot find information about it.
Related
I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.
I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.
Code in SASS file (resources/assets/SASS/banners.scss)
section.module.parallax-1 {
background-image: url('../images/banner1.jpg');
}
Compiled with mix in (app.css)
section.module.parallax-1 {
background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}
So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.
I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?
webpack.mix code / js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs
You can use the following fix:
in webpack.mix.js add
mix.options({
processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});
Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.
(Same as where the webpack.mix.js is)
Find and remove this string from your new webpack.config.js file
{ loader: 'resolve-url-loader' + sourceMap },
When thats done you have to update your npm scripts to use your webpack.config.js file.
In your package.json use these scripts instead
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
I've read the documentation, which says that if I want to use scss I have to run the following command:
ng set defaults.styleExt scss
But when I do that and make that file, I still receive this error in my console:
styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)
For Angular 6 check the Official documentation
Note: For #angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.
For existing projects
In an existing angular-cli project that was set up with the default css styles you will need to do a few things:
Change the default style extension to scss
Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:
ng config defaults.styleExt=scss
if you get an error: Value cannot be found. use the command:
ng config schematics.#schematics/angular:component.styleext scss
(*source: Angular CLI SASS options)
Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)
Point the CLI to find styles.scss
Manually change the file extensions in apps[0].styles in angular.json
Point the components to find your new style files
Change the styleUrls in your components to match your new file names
For future projects
As #Serginho mentioned you can set the style extension when running the ng new command
ng new your-project-name --style=scss
If you want to set the default for all projects you create in the future run the following command:
ng config --global defaults.styleExt=scss
As of ng6 this can be accomplished with the following code added to angular.json at the root level:
Manually change in .angular.json:
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
Open angular.json file
1.change from
"schematics": {}
to
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
change from (at two places)
"src/styles.css"
to
"src/styles.scss"
then check and rename all .css files and update component.ts files styleUrls from .css to .scss
In latest version of Angular (v9), below code needs to add in angular.json
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
Could be added using the following command:
ng config schematics.#schematics/angular:component.style scss
For existing projects:
In angular.json file
In build part and in test part, replace:
"styles": ["src/styles.css"], by "styles": ["src/styles.scss"],
Replace:
"schematics": {}, by "schematics": { "#schematics/angular:component": { "style": "scss" } },
Using ng config schematics.#schematics/angular:component.styleext
scss command works but it does not place the configuration in the
same place.
In your project rename your .css files to .scss
For a new project, this command do all the work:
ng n project-name --style=scss
For global configuration
New versions seems to not have a global command
First install in your project:
npm i --save-dev schematics-scss-migrate
In your Angular CLI project:
run below command:
ng g schematics-scss-migrate:scss-migrate
Above command will do the following in the consuming project:
Rename all the stylesheets in the src folder recursively.
Alter the styleUrls in respective component classes to point to the new file names for stylesheets.
Updates the component styles schematics value in the angular.json file or creates one if the schematic does not exist, and
Renames all styles.css references to styles.scss in the angular.json file.
I have tried this on my angular 9 project and it worked...no need for extra efforts for renaming files...😎 just enter the command and BOOM!!! now your project is migrated to scss project.
refer:
https://www.npmjs.com/package/schematics-scss-migrate
For Angular 6,
ng config schematics.#schematics/angular:component.styleext scss
note: #schematics/angular is the default schematic for the Angular CLI
CSS Preprocessor integration for Angular CLI: 6.0.3
When generating a new project you can also define which extension you want for style files:
ng new sassy-project --style=sass
Or set the default style on an existing project:
ng config schematics.#schematics/angular:component.styleext scss
Angular CLI Documentation for all major CSS preprocessors
Use command:
ng config schematics.#schematics/angular:component.styleext scss
There's obviously more than one ways to do this, but with the recent versions of angular I got another schematics value which I wanted to preserve. Because of this other value the command ng config schematics.#schematics/angular:component.styleext scss failed for me, so I took the new value and entered it myself in angular.json. This is the new value you have to enter:
"#schematics/angular:component": {
"style": "scss"
}
And angular.json looks like this at the end:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
...
"projects": {
"yourapp": {
...
"schematics": {
"#schematics/angular:application": {
"strict": true
},
"#schematics/angular:component": {
"style": "scss"
}
...
Then you'll have to
rename all the css files to scss and
change all the references in your files to those.
You should be done with those steps.
manually change the below code in "angular.json" which will be at the end of the file.
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
Kindly rename the files from .css to .scss and change all the references to the same
A quick and easy way to perform the migration is to use the schematic NPM package schematics-scss-migrate.
this package renames all css files to scss files :
ng add schematics-scss-migrate
https://github.com/Teebo/scss-migrate#readme
A brute force change can be applied.
This will work to change, but it's a longer process.
Go to the app folder src/app
Open this file: app.component.ts
Change this code styleUrls: ['./app.component.css'] to styleUrls: ['./app.component.scss']
Save and close.
In the same folder src/app
Rename the extension for the app.component.css file to (app.component.scss)
Follow this change for all the other components. (ex. home, about, contact, etc...)
The angular.json configuration file is next. It's located at the project root.
Search and Replace the css change it to (scss).
Save and close.
Lastly, Restart your ng serve -o.
If the compiler complains at you, go over the steps again.
Make sure to follow the steps in app/src closely.
In ng6 you need to use this command, according to a similar post:
ng config schematics.#schematics/angular:component '{ styleext: "scss"}'
For users of the Nrwl extensions who come across this thread: all commands are intercepted by Nx (e.g., ng generate component myCompent) and then passed down to the AngularCLI.
The command to get SCSS working in an Nx workspace:
ng config schematics.#nrwl/schematics:component.styleext scss
For Angular 11+
Manually change in angular.json.
Replace the "schematics": {},
with
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
for angular version 12
Just rename styles.css file to styles.scss and update angular.json src/styles.css to src/styles.scss
i'm starting a new project using reactjs ES6 and webpack
using react-static-boilerplate starter question is how can i import bootstrap4 into the build proccess ?
i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its #variables and apply my theme etc.
i started project by cloning boilerplate
> git clone -o react-static-boilerplate -b master --single-branch \
https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install
installed bootstrap using npm
npm install bootstrap#4.0.0-alpha.3
now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?
First of all you need to download proper loader for scss
Install sass-loader
npm install sass-loader --save-dev
Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done
{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}
If you got error regarding node-sass
If you got error like cannot resolve node-sass then install
npm i node-sass --save-dev
Now if you import bootstrap.scss webpack will bundle it for you
import "bootstrap/scss/bootstrap.scss"
How to customize it
Example in your own scss file
$btn-font-weight:bold;
and then import the component you want to override or the whole bootstrap.scss
#import '~bootstrap/scss/bootstrap.scss';
In my case style.scss
$btn-font-weight:bold;
#import '~bootstrap/scss/bootstrap.scss';
main.js
import "bootstrap/scss/bootstrap.scss"
import "./style.scss"
Hope this help you to achieve your goal!
I have created a demo app here
run npm install
and npm start
got to localhost:8080
Seems like the boilerplate doesn't use sass-loader, and doesn't look for .scss files.
So first off install npm i sass-loader --save
Then under the loaders part in the webpack config you should add something like this:
webpack.config.js
var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
// ...
loaders: [
// ...
{
test: /\.(css|scss)$/,
include: [
path.join(nodeModules, 'bootstrap'),
],
loaders: ["style", "css", "sass"]
}
]
// ...
};
Now, if you want to play around with bootstrap's .scss variables, you can do so like this:
styles/app.scss
$brand-warning: pink !default;
#import '~bootstrap/scss/bootstrap.scss';
and in your main.js put in the style import
import "styles/app.scss";
Also, I should mention, this seems very close to this answer
Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps. From the raw boilerplate, add bootstrap 4 with npm as you already did:
npm install bootstrap#4.0.0-alpha.3 --save
Then in src/styles/styles.scss you want to add a couple imports
#import "./bootstrap-custom";
#import "~bootstrap/scss/bootstrap";
This is essentially the same thing as #DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables. You can then copy out the variable names that you want to update. Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:
/*
* overrides for bootstrap defaults, you can add more here as needed, see node_modules/bootstrap/scss/_variables.scss for a complete list
*/
$gray-dark: #333;
$gray: #777;
$gray-light: #000;
$gray-lighter: #bbb;
$gray-lightest: #ddd;
npm install --save-dev sass-loader css-loader style-loader node-sass
on your webpack.config.js:
loaders: [
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
Not the OP's original framework (but that was a few years back). As of react-scripts#2.0.0 it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: https://facebook.github.io/create-react-app/docs/adding-bootstrap
I am using Compass through grunt to compile a SASS file. My directory structure looks like this:
project/
Gruntfile.js
package.json
sass/
part1/
part1.sass
css/
And my Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
std: {
options: {
sassDir: 'sass',
cssDir: 'css',
specify: 'sass/part1/part1.sass',
raw: 'disable_warnings = true\n'
}
}
}
});
When I run my gruntfile, Compass outputs to project/css/part1/part1.css, but I want it to output to project/css/part1.css instead. How can I do this? Right now I am using an on_stylesheet_saved hook to move the file, but it is not very elegant.
Hopefully the question is clear, and thanks in advance.
I recreated your environment. I could simplify the Gruntfile.js even more:
module.exports = function(grunt) {
// Main project configuration
grunt.initConfig({
// Read NPM package information
pkg: grunt.file.readJSON('package.json'),
// Compass
compass: {
std: {
options: {
cssDir: 'css',
sassDir: 'sass'
}
}
}
});
// Load the grunt tasks
grunt.loadNpmTasks('grunt-contrib-compass');
// Compile production files
grunt.registerTask('std', [
'compass:std'
]);
// Default task(s)
grunt.registerTask('default', 'std');
};
What you are getting is the expected compass behavior.
Reading a bit through the grunt-contrib-compass's readme, I see:
Compass operates on a folder level. Because of this you don't specify any src/dest, but instead define the sassDir and cssDir options.
That means that you cannot change the path to where your CSS gets compiled to, only determine the path of the root folder to which all compiled files are written to.
While it can be annoying, compass is simply assuming that keeping the compilation true to the directory structure is supposed to be something you would rather do - which is somewhat opinionated.
You could still do what you want, by:
Restructuring your files so that they are where compass would expect them to be to comply to your intention. Namely dropping the part1 directory and placing part1.sass under the sass folder.
Compiling your CSS files to a temporary folder like tmp, using another task like copy (grunt-contrib-copy) to copy all CSS files to the css folder and then use a task like clean (grunt-contrib-clean) to empty the tmp file. You would load the tasks in that order, so they run in the right sequence.
I updated the latest version of grunt (0.4.1) and installed the compass package (grunt-contrib-compass).
Here the config I use:
compass: {
dist: {
options: {
sassDir : "src/theme/sass",
cssDir : "src/theme/css",
imagesDir: "src/theme/img",
javascriptsDir : "src/js",
fontsDir : "src/theme/fonts",
environment : "production"
}
}
}
Every time a change occurres in the sass directory, the compass task is executed and the css directory is created (with the production css files).
Everything is good but the css files, the config.rb files and the sass cache are also recopied in the sass directory.
Has someone ran into the same problem?
As you have a config.rb, consider actually using it:
compass: {
dist: {
options: {
config: 'config/config.rb'
}
}
}
Old question, but I ran into this problem once. But the problem was me running the compass command instead of grunt compass so default configuration was been used.