I import all my SCSS styles into a index.scss file using #import. This works fine when I build css manually using npm run build-css:
"scripts": {
//Other scripts
"build-css": "node-sass src/scss/index.scss -o dist/css/",
}
When I run node-sass in watch mode it updates the /dist/css/index.css just fine but also creates the css in the dist folder for the original scss file that I edited and imported in the src/scss/index.scss
"scripts": {
//Other scripts
"build-css": "node-sass src/scss/index.scss -o dist/css/",
"watch-css": "npm run build-css && node-sass src/scss/index.scss -o dist/css/ -w src/scss/**/*.scss --include-path src/scss/imports/*.scss"
}
My src/scss/index.scss looks as follows:
#import "./imports/bootstrap.min";
#import "./imports/contacts";
So, if I edit contacts.scss in watch mode node-sass updates the ./dist/css/index.css but also creates an extra contacts.css in the dist/css folder.
Is there a way I can have node-sass update only the dist/css/index.css and not build the imports into the dist folder?
Change the filename contacts.scss to _contacts.css; the compiler ignores the underscored files.
Related
I can't seem to figure out how to change compiled and compressed file extension with node-sass.
right now I tried different variations but it still compiles scss to style.css file.
I tried this
node-sass --watch scss -o dist --output-style compressed --out-file-extension .min.css
I also tried this
node-sass --watch scss -o dist/style.min.css --output-style compressed
I couldn't figure out how to do it with node-sass so I used Sass instead.
I accomplished the result I wanted with installing
npm install sass --save-dev
And adding this to my package.json
sass --watch scss/style.scss:dist/style.min.css --style compressed
scss/style.scss being the folder and file I want to compress and dist/style.min.css is the destination
Add this if you don't want the .map file
--no-source-map
I'm new to SASS and needing to compile it into CSS code. I'm using node.js NPM to compile it, I've installed everything and I have my package.json file in the folder for my website. I also have all my CSS and SCSS/SASS files in my website folder, there's no extra folders. I'm following a tutorial and this is the script it uses:
"scss": "node-sass --watch assets/scss -o assets/css"
Obviously that does not work because the directories assets/scss and assets/css are wrong. I know I can fix the error by replacing them with the directories of my main.scss file and my main.css file in my website folder. I just don't know what I should write if it's all located in the same folder.
Can anyone tell me how the directories should be written or show me how I should write this script for compiling?
Your package.json is must in the root directory, so follow it and reach to the destination of your SCSS and CSS folder, I used below node-sass script
"node-sass": "node-sass -w --source-map true assets/scss/main.scss assets/css/style.css --output-style expanded"
If it's all located in the same folder
for that, you need to use
"node-sass": "node-sass -w --source-map true main.scss style.css --output-style expanded"
Is there any way to compile node-sass forcefully even if there is no change in the SCSS files. Like the compass watch --force in ruby-sass
Now I am using the following command with the npm script
node-sass --watch assets/scss -o assets/css --output-style compressed
Yes you can:
node-sass --output-style=compressed --output=assets/css assets/sass
Thay will compile all .scss files located in assets/sass into assets/css.
You code uses the --watch argument; that means that node-sass will be watching assets/scss for any .scss or .sass file that changes, to compile the files.
You can learn more about node-sass here. Hope it helps!
I created a brand new React application with create-react-app and now I want to add SASS to it.
I followed the instructions here. Basically I run
npm install node-sass --save-dev
and then added these two lines to my package.json file:
"scripts": {
"build-css": "node-sass src/ -o src/", # Line 1
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", # Line 2
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
This should do the job, according to the documentation, but when I complete the process doing
mv src/App.css src/App.scss
and then
npm run watch-css
the script just won't finish by itself. I always have to use Ctrl-C to finish it and I believe this is not normal.
My questions are:
Is this normal?
Have I missed something?
If so, what have I missed?
You need to transpile the scss to css for this you can use Webpack or Gulp. I will show you an example for Webpack as I prefer this more. Webpack it takes a while to config you can watch tons of internet tutorials.
In order to transpile scss into css you need to write a loader, in Webpack will be something like this:
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', 'css!sass'
)
},
]
},
This are the packages for the loader, install with npm --S -D sass-loader style-loader into package.json file.
Now in order for Webpack to see the scss files you need to import those files into a js/jsx file for example App.jsx. But to not have a lot of imports you can have a base.scss and you will import other scss fils into it
example import './assets/stylesheets/scss/base.scss';
base.scss contains import to other scss files.
This is just a small introduction to what you must do. You need a little bit more to config Webpack you can search on youtube for that or This github link will help you alot!
Gulp is similar you write tasks, as far as I know there is gulp-scss package.
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"