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.
I'm running into an issue which seems similar to the one reported in https://github.com/sass/dart-sass/issues/284, but doesn't seem 'fixed' for me. I'm trying to follow the workflow described in https://getbootstrap.com/docs/4.1/getting-started/theming/ to import Bootstrap's SCSS source code.
Here is my (simplified) directory structure:
.
├── index.html
├── node_modules
│ ├── #mdi
│ └── bootstrap
├── package-lock.json
├── package.json
├── scss
│ └── peek-solutions2.scss
└── stylesheets
└── peek-solutions.css
I've installed Bootstrap using npm install bootstrap; my package.json contains the following dependencies:
{
"dependencies": {
"#mdi/font": "^2.2.43",
"bootstrap": "^4.1.1"
}
}
In peek-solutions2.scss, I've added the following line:
#import "../node_modules/bootstrap/scss/bootstrap";
I've tried the sass --watch command specifying input and output files in different directories (cf. https://sass-lang.com/guide), but I run into an import error:
Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ sass --watch scss/peek-solutions2.scss:stylesheets/peek-solutions2.css
Error: Can't find stylesheet to import.
#import "functions";
^^^^^^^^^^^
../node_modules/bootstrap/scss/bootstrap.scss 8:9 #import
scss/peek-solutions2.scss 1:9 root stylesheet
Sass is watching for changes. Press Ctrl-C to stop.
It seems like this is a path issue; _functions.scss is in the same directory as bootstrap.scss in node_modules/bootstrap/scss, but it seems like the sass command is expecting it to be in my custom scss directory. How can I fix this?
just delete the dots in the beginning , you must write:
#import "node_modules/bootstrap/scss/bootstrap";
in your scss file
This happened to me because I was running ng build --prod within a folder other than the root project folder, and every other css import breaks.
The solution is to cd to the root folder.
I solved it by using an extra forward slash #import "//abstracts/variable";
I solved this issue by pointing the imports to the files directly, i.e:
#import 'style/components/palette';
to
#import 'style/components/_palette.scss';
For those using the sass NPM package and have their own NodeJS build script, make sure that you provide loadPaths as an options parameter in your compile or compileAsync method. For example:
import sass from 'sass';
// const sass = require('sass');
const build = async () => {
await sass.compileAsync('./src/index.scss',
{
sourceMap: true,
style: 'expanded',
loadPaths: ['./src']
}
);
};
Here ./src is where your main scss file resides, relative to your project directory. You might not need this configuration if the index file is in project root, but most people probably don't put their scss files there.
I finally worked around this problem by using Grunt instead of sass to compile and watch the SCSS files. After running npm install grunt --save-dev, npm install grunt-contrib-sass --save-dev, and npm install grunt-contrib-watch --save-dev, I added the following Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'stylesheets/main.css': 'scss/main.scss', // 'destination': 'source'
}
}
},
watch: {
scripts: {
files: ['**/*.scss'],
tasks: ['sass'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
Now if I run grunt watch, whenever I save scss/main.scss it gets compiled into stylesheets/main.css:
Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ grunt watch
Running "watch" task
Waiting...
>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task
Done.
Completed in 1.720s at Sun Jul 01 2018 14:41:11 GMT-0700 (PDT) - Waiting...
I installed the bootstrap old version which didn't add scss folder in bootstrap under my node module, so I uninstalled my bootstrap by the command npm uninstall bootstrap and installed it back by npm i bootstrap.
If, for example your index.scss file is in a directory called 'sass' e.g.
├── node_modules
├── sass
│ └── index.scss
then you should use this file path:
#import "../node_modules/bootstrap/scss/bootstrap";
I also got this error and I solved it just using the relative path, like this:
#import '../../node_modules/bootstrap/scss/bootstrap';
If you're using rails and trying to get production to work, you may have run the production command to build assets in your dev environment. For instance:
yarn build:css
or
sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
Either way, Rails may be preferring the "built" assets over the dev ones. So you may already have fixed the issue with bootstrap and not know it! Remove your build directory:
rm -rf app/assets/builds
and your other asset files will be used.
I faced this issue in Laravel 9. Remove this symbol. ~
// Bootstrap
#import "bootstrap/scss/bootstrap";
In peek-solutions2.scss, remove the previous code and add this:
#import "node_modules/bootstrap/scss/bootstrap";
According to this github issue:
Dart Sass's command-line interface doesn't look for imports in any location that's not explicitly provided as a --load-path on the command line. Node Sass's CLI may behave differently.
Thus to get the a similar behaviour with node-sass use --load-path.
sass --load-path=./ src/scss/styles.scss dist/css/styles.css
This command will load the current dir and will resolve ./node_modules or a possible ./src.
I fixed this issue with updating sass version from 1.26.10 to 1.32.13.
Check where Bootstrap is in node_modules and add
#import "../node_modules/bootstrap/scss/bootstrap";
for it.
Try #import "~bootstrap/scss/bootstrap.scss";,
no forward slash after the tilde.
It can be routing issues, if you are on rails use this
#import "../../../node_modules/bootstrap/scss/bootstrap";
#import '../../../node_modules/bootstrap-icons/font/bootstrap-icons';
In my case, it was caused by the fact that my project was opened in a parent folder
root ⬅️ my vscode had this folder as a root
└── project ⬅️ should have been in this folder instead
├── node_modules
├── src
├── static
└── ...
In my case, I had a symlink to my C:\dev folder when the physical location was actually E:\dev. Changing directories from C:\dev\project to E:\dev\project and running the mix command fixed this for me
If you're using Aurelia, WebPack and SASS and you did an NPM install of bootstrap the import will be:
#import "../../node_modules/bootstrap/scss/bootstrap";
You simply need to cd into the root of your project folder. Two scenarios:
If you're deep inside the project, you need to run cd .. in the command line until you are in the root.
If you're outside of the project, you need to run cd [insert root folder here] and run your build again.
I need to compile multiple scss files into a single css file using node-sass.
My structure looks like this:
/
/scss
app.scss
/components
header.scss
/css
app.css
In my app.scss file I import all my other files. So watching just that file doesn't work like this example I tried:
"watch": "node-sass -w scss/app.scss css/app.css"
It did work as long as I put all the code in that file and didn't import anything else or manually compiled that each time, but the watching didn't work.
So I tried this as well to no avail:
"watch": "node-sass -wr scss/* app.css"
You could use the onchange npm package. You can watch globs and run scripts when any of them change.
"watch": "onchange 'scss/**/*.scss' -- npm run compile",
"compile": "node-sass scss/app.scss css/app.css"
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
There's my project with the folowing structire:
project
assets
scripts
styles
app.scss
bower_components
node_modules
public
css
app.css
js
bower.json
gulpfile.js
package.json
I use gulp-sass to compile app.scss to app.css and i want to include foundation in app.scss
gulp.task('styles', function() {
return gulp.src(path.src.styles)
.pipe(sass({
includePaths: ['./bower_components/foundation/scss']
}))
.pipe(concat('app.css'))
.pipe(gulp.dest(path.public.styles));
})
Then I white in app.scss file:
#import 'foundation/_settings';
#import 'foundation';
And when i run gulp, I get:
Error: assets\styles\app.scss
undefined:undefined Invalid UTF-8
What's wrong?
I think you have a UNIX unsupported letter in your folder path ? Try removing it.
I removed this error by removing the letter "ä" from the folder name.
set file encoding to UTF-8 in your IDE, it is probably something else by default and sass is interprets it as UTF-8
I just had to rename windows user name, because it contained UNIX unsupported characters.
But because it was too difficult to rename the folder of user, I just moved my project.
Try to replace on package.json of gulp-sass, instead of
"node-sass": "^3.4.2"
with
"node-sass": "^3.5.0-beta.1"
This worked for me!