I have the following folder structure:
theme
scss
hero.scss
header.scss
style.css
I'm trying to compile everything in the scss into style.css. I've followed this tutorial, but I believe this approach will compile several different css files (whereas I only want the one).
Even with the above approach, whenever I run npm run scss, it doesn't compile anything?
This is my package.json file:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch scss -o css"
},
"author": "",
"license": "ISC"
}
When running npm run watch-css or npm run scss, nothing happens? Where am I going wrong?
Your input directory and output directories are incorrect for the node-sass command. Assuming you've the following directory structure:
theme
scss
hero.scss
header.scss
style.css
package.json
You've created an npm run script called scss which is leveraging the node-sass library to compile your SASS into CSS. If you want to execute this run script you should type the following into your command line: npm run scss
Now when you type this command you're actually running the node-sass library with these parameters:
node-sass --watch scss -o css
In this command, you've specified that your Sass files exist in your scss directory and node-sass should look in this directory to compile your Sass into CSS. Once this is done your newly generated CSS is moved into your css directory.
However, the first issue is you don't have css directory for node-sass to put these compiled Sass files into. You can remedy this by either creating a css folder within your theme directory or modifying your output location parameter appropriately.
The other issue is your input directory location is incorrect for your Sass files. You've specified it as the scss directory however this location is relative to your package.json file and there is theme folder in-between said files. This should probably be changed to the following: theme/scss.
So in order to get it this command to work appropriately you need to change your input and output directories to point to the correct directory structure of your application.
Perhaps you could try changing your run script to the following and seeing if this helps (Assuming you don't want to create a css folder):
"scss": "node-sass --watch theme/scss -o theme"
then re-run your npm script like so:
npm run scss
Hopefully that helps!
Related
I'm trying to get sass to run through the terminal and when I try, I get the error mentioned above. It seems that the installation of sass itself was successful because I can see it in my package.json file:
"devDependencies": {
"sass": "^1.51.0"
}
I have tried uninstalling/reinstalling sass, and restarting the client, but can't get the 'sass' keyword to work. I currently have my project located in a folder that github is also directed at so I can make pushing updates to github easier. Any help would be greatly appreciated.
Try npx sass, or create a new entry in the scripts section of your {package,yarn}.json file that calls sass.
"scripts": {
"build": "sass input.scss output.css",
}
Then, npm run build or yarn build, depending on which package manager you are using.
https://sass-lang.com/documentation/cli/dart-sass
I've got TSLint running nicely in my IDE and everything is great! However when I run npm run tslint it throws errors on some of my .svg and .scss files. It shouldn't be running on that and it doesn't run those in my IDE so what's up?
Here's my package.json script:
"scripts": {
"lint": "tslint ./src/*",
},
Can I edit that script to ignore .svg and .scss files?
You'll want to only lint .ts and .tsx files (or just .ts if you're not on React).
"scripts": {
"lint": "tslint ./src/**/*.ts ./src/**/*.tsx",
},
I have downloaded a free HTML theme.
If I open index.html file of the theme in the browser it works perfectly.
However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.
The scss folder is present in the theme folder but I really don't know how to include this into my project
You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.
First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so
they can be found by Laravel to be compiled
now you have to compile SASS into css you can use gulp manually or make use of
Laravel mix which is already implemented for you by Laravel
Laravel Ships with packages.json file you will find that in your app root
directory so before being able to compile SASS you have to run npm install in
your root directory (make sure that you have npm and node installed)
after running npm install now you can run either one of these to compile any
sass files you have in "resources/assets/sass"
npm run dev //this will compile one time only
npm run watch //this will automatically watch for any changes and compile
Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.
Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here
Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.
1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss
2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.
3- In the app.scss file import all the theme scss files using #import 'file/source';
4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.
5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.
The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.
In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass
Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss
Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
And in your Blade files add the following, again making sure to use the correct path for the folder you made:
#vite(['resources/scss/app.scss', 'resources/js/app.js'])
Then you can build your sass using Vite by running npm run build
How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass
file:
sass --watch style.scss:style.css
But how to watch changes in whole directory/folder containing many sass files.
Simply use the command sass --watch <input folder>:<output folder>, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Expanding the answer by piouPiouM a little:
Output files will be created with the same names as input files except ending with .css.
<input folder> and <output folder> can be the same.
Both folders can be the present working directory, so the following is valid:
$ sass --watch .:.
Go to you terminal and get to you folder then wrote:
sass --watch .
this will watch all sass files and convert to css files with the same name.
also you can do it in this way:
sass --watch ~/user/youUser/workspace/project/styles/
I hope this can help you.
I ended up doing this without using Grunt or Sass-watch:
npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
if you are in your current folder then do the following to watch it.
F:\sass tutorial>sass --watch ./:./
Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated.
and as now (May 2018) if you install dart sass via npm , it does not support --watch command
What to do:
you need to install node-sass globaly , like:
npm install node-sass -g
and then restart the command line , then use this code:
node-sass --watch scss/styles.scss css/styles.css
to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.
and just in case you get an error like this at the first time that you save your .scss file:
{
"status": 3,
"message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
"formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}
what you need to do is save it again, it will work correctly!
According to the information, you can use the next command line:
sass --watch .
Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do
You can create one sass file which includes the rest of the files, and then just watch this file.
Alternately, look into Grunt and the very good grunt-contrib-compass plugin
You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:
npm i -g sass
then go to the project folder and type command below:
sass --watch $(pwd)/src/static
also you can wrap it in npm script in package.json, like
"scripts": {
"sass:watch": "sass --watch $(pwd)/src/static"
}
and run it by this command:
npm run sass:watch
I seem not to be able to make sass watch changes in my partials, so it is only when I make changes to my main scss file that the css file is compiled.
I have a folder with my m.scss and m.css file and a subfolder to that called partials with my partials in. So:
m.css
m.scss
partials/_base.scss
I have tried:
sass -I partials --watch m.scss:m.css
But does not work.
I am on a mac with an ubuntu server running on paralels and running Haml/Sass 3.0.15 (Classy Cassidy)
The simple way I got this to work was to go to just do a watch on the folder with my primary css in. So if your css folder is call "css" then:
sass --watch css
That compiles m.scss into m.css everytime a scss file in the folder or a subfolder is changed