So here is the scenario, I have "main.scss" file inside "sass" folder and "style.css" file inside "css" folder. I have also already installed the "node-sass", "npm". When i try to compile the sass file into the css file through the terminal. It shows that it is successfully compiled but i can't see any updates on the css file. [
{
"name": "natours",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css"
},
"author": "anjan",
"license": "ISC",
"devDependencies": {
"node-sass": "^5.0.0"
}
}
As soon as i compile the file, i get the package-lock.json file on my folder. I am also assuming this might be causing the update to stop on css file.
Can anyone help?
Try this:
C:\Users\HP\Desktop\advanced-css-course-master\Natours\starter> sass --watch sass/main.scss:css/style.css
Related
Fresh install of Vite and Tailwind results in tailwind.config.js, postcss.config.js and vite.config.js in the root folder of Laravel 9.
Is this expected? I want to organize these file into the existing resources/js folder. Where do I update references to these files to avoid breaking things?
Yes this is the default behaviour.
You can change the location of your vite.config.js to any location you want by using the --config flag in your package.json script:
"scripts": {
"dev": "vite --config custom/location/vite.config.js",
"build": "vite build --config custom/location/vite.config.js"
},
In the vite.config.js you can change the tailwind.config.js and remove the need for your postcss.config.js entirely like this:
...
css: {
postcss: {
plugins: [
require("tailwindcss")({
config: "custom/location/tailwind.config.js",
}),
require("autoprefixer"),
],
},
},
I am trying to add bootstrap to my directory using npm.
This is my file structure:
I am using #import in my style.scss file
#import "../node_modules/bootstrap/scss/bootstrap";
And my package.json looks like this. It's basically starter kid from this site -
minimum-static-site-sass-setup
{
"name": "playground",
"version": "0.1.0",
"description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML",
"main": "public/index.html",
"author": "5t3ph",
"scripts": {
"build:sass": "sass --no-source-map src/sass:public/css",
"copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
"copy:html": "copyfiles -u 1 ./src/*.html public",
"copy": "npm-run-all --parallel copy:*",
"watch:assets": "onchange \"/src/assets/**/*\" -- npm run copy:html",
"watch:html": "onchange \"src/*.html\" -- npm run copy:html",
"watch:sass": "sass --no-source-map --watch src/sass/:public/css",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server public --files public",
"start": "npm-run-all copy --parallel watch serve",
"build": "npm-run-all copy:html build:*",
"postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
},
"dependencies": {
"autoprefixer": "^10.4.2",
"bootstrap": "^5.1.3",
"browser-sync": "^2.27.7",
"copyfiles": "^2.4.1",
"cssnano": "^5.0.17",
"npm-run-all": "^4.1.5",
"onchange": "^7.1.0",
"postcss-cli": "^9.1.0",
"sass": "^1.49.8"
}
}
Every time I try to compile it, I get this error:
"Error: Can't find stylesheet to import.
╷
6 │ #import "../node_modules/bootstrap/scss/bootstrap";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\sass\style.scss 6:9 root stylesheet"
I tried many potential solutions from stackoverflow but none of them seems to work for me.
Any idea, what I'm doing wrong?
#import "../../node_modules/bootstrap/scss/bootstrap";
wrong path, that was the problem :)
Open the angualr.json and find the options object then add stylePreprocessorOptions(The Path is Projects-> Your Project Name-> architect-> build-> options). as follows:
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/",
"src/assets" // I place my *.csss here . You can add your path
]
},
}
You can try with:
#import "~node_modules/bootstrap/scss/bootstrap";
or
#import "~bootstrap/scss/bootstrap";
don't you need a .css or something like that in the end? Shouldn't an extension be there?
I'm trying to create a task to run a sass compilation for the current file but I'm not able to set the output css folder and filename.
The structure of my sass and css files are:
myfolder\css\myfile.css
myfolder\scss\myfile.scss
My current task is:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Compile SCSS",
"type": "shell",
"group": "build",
"command": "sass --load-path ${workspaceFolder}\\vendor\\scss --load-path ${workspaceFolder}\\base\\scss --no-cache --sourcemap=none --update ../scss/${fileBasename}:${fileDirname}/../css/${fileBasenameNoExtension}.css"
}
]
}
the problem is the latest section where I need to put my sass folder/file : my css folder/file
What's the approach here?
I just started a React App using the Facebook tutorial here:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
I wanted to get this code snippet working in my react app:
https://codepen.io/saransh/pen/BKJun
I npm installed these modules: node-sass-chokidar,react-compass, compass-importer, sass-resources-loader
I put the CSS from the Code pen into a .sass file within my project like so:
Here is the first snippet of the SASS code in Starr.sass
#import compass
// n is number of stars required
#function multiple-box-shadow ($n)
$value: '#{random(2000)}px #{random(2000)}px #FFF'
#for $i from 2 through $n
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
#return unquote($value)
$shadows-small: multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big: multiple-box-shadow(100)
html
height: 100%
But this seems to be the wrong strategy because I get this error when I do "npm run watch-css":
"File to import not found or unreadable: compass"
I tried to find online resources for steps to take to get compass to import, and they all talk about different tools: Babel, Webpack, etc, but I am relatively new and do not know which steps to take next.
What are the concrete steps I have to take to go from npm create-react-app to being able to do #import in .SASS files to be used by app? Here is my current package.json file:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"compass": "^0.1.1",
"node-sass-chokidar": "0.0.3",
"react": "^16.2.0",
"react-compass": "^0.1.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"sass-resources-loader": "^1.3.2"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"compass-importer": "^0.4.1",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6"
}
I looked at some stackoverflow questions, but did not find what my next logical step would be. Here is one:
How to configure webpack to use compass in my project
I am trying to add new bower components in sage wp theme, only problem is that i can only add in manyaly in sass?
This is my bower.json
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben#benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"bootstrap-sass": "3.3.7",
"pushy": "1.0.0",
"fullpage.js": "2.9.2"
}
}
But in main.scss nothing is added?
// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
#import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
When you run the bower install command you must add the --save flag to the end of it for it to update everything.