I have watched Paul Irish's video of him making changes to CSS in DevTools, which were saved in his local Sass file too. To do that he set up a Workspace in Chrome then used Sass --watch flag with this path: style.scss:style.css.
I have a little bit different file structure than him. I have multiple Sass subfiles, which I import to my main.sccs. Then Sass compiler watches for changes in this file and compiles it to main.css (with a sourcemap by default).
So my file structure look like this:
project's root
|-- index.html
|-- css
|-- main.css
|-- sass
|-- main.scss
|-- theme
|-- _variables.scss
|-- _components.scss
|-- _sctructure.scss
|-- _menu.scss
And to compile Sass files I this path:
sass --watch sass/main.scss:main.css --style compressed
By him all worked well. By myself this works just partially because:
Changes made in Elements Pane are saved just to compiled style.css file on my drive. Sass files stay untouch.
Just changes made direct to Sass files in Sources Pane are saved to my local Sass files and to CSS file as well.
I want to make a change in Elements Pane and have it saved to my Sass files.
I can't make it work. I have tried to put all my styles in a single Sass file (just like Paul: one style.scss file compiled to style.css) but it didn't help. I have also tried to change a path in the Sass compiler and to watch a whole Sass directory. And still nothing. DevTools doesn't save changes made in Elements Pane to Sass files.
Any ideas how it can be achieved? I've looked for additional info on this topic but I didn't found a single solution, which would helped me in this regard.
Related
I am setup the project of the vuejs on of the my goals in the end of the project is to compile files scss which is the main file with name style.scss- from input to output in the file main file style.css to Load in the vuejs.
Also all files .scss should include with #importfor examples: #import "variables";and so on
in the main file style.scss.
I read about it.enter link description here
My project is as in the picture below.
Any idea how to sole it?
Thanks.
My dear friend, if I have understood your meaning correctly, I would like to try to offer you some solutions.
In order to use SCSS in a project and compile it automatically in the background, we can do the following steps:
1. Install node-sass
To get the compiler, we’re going to install the node-sass package.
Go to your terminal, navigate to the project folder and type in the following:
npm i node-sass
2. Create an SCSS folder
Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.
Rename the extensions on all the newly pasted css files with .scss
You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.
3. Add a script in package.json
In your package.json file, locate scripts and add the following piece of code inside it:
"scss": "node-sass --watch scss -o css"
If your css folder is named something other than css, then replace the word css with the folder name.
Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.
Setting context in the overall package.json file, the script will be placed like this:
{
“name”: “example-project”,
“version”: “0.4.2”,
“scripts”: {
“start”: “node ./bin/www”,
“scss”: “node-sass — watch scss -o css”
},
"dependencies": {
"express": "~4.16.0",
"express-favicon": "^2.0.1",
}
}
4. Run the compiler
Get back into terminal and run the following commandL
npm run scss
Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.
if you have any new idea about Compile SASS to CSS you can check another steps with this link.
I have a folder with Less files, split in parts to have a cleaner workspace. But I want them to be compiled by PhpStorm to 1 file (styles.css in a css folder). I installed lessc and it compiles the files separate. See picture 1
As I said I would like to have all files combined into css/styles.css But I don't get this configured right. My configuration is as followed:
I hope someone can explain what arguments I could use.
When Track only root files option is enabled in Less file watcher settings, file watcher produces a single .css file with name matching your "main" .less file (the one that imports all your "partials") that includes the merged content of all your .less files. No individual .css files for partials are created
I've set up a new Jekyll site to test the Neat 2.0 grid. However, as I run Jekyll Serve I've noticed that nothing from my main.scss file doesn't compile into my main.css file:(
Folder set up
Config.yml
sass:
sass_dir: _scss
What's happening here and how can I get my main.scss file to compile?
The sass_dir won't be processed by the sass converter directly, is only meant to contain partials:
sass_dir becomes the load path for Sass imports, nothing more. This
means that Jekyll does not know about these files directly (..)
This folder should only contain imports.
To have your sass file converted, start the file with two lines of triple dashes:
---
---
// sass content
The output file will be located in the directory where that file is placed.
You can put it in css/main.scss and Jekyll will generate css/main.css.
I am playing with this as well, but I'm a beginner, so take my advice with a pinch of salt.
However, my setup is working and compiling all scss changes when I'm running "jekyll serve --watch" with my _sass folder specified in config.yml as:
sass:
sass_dir: _sass
My _sass folder itself contains a couple of _scss files, which I use for styling, but the important thing, I think, is that my jekyll CSS folder contains only imports in only one file named main.scss, like this:
---
# Front matter comment to ensure Jekyll properly reads the file
---
#import
"layout",
"grids",
"etc"
Hopefully this not-very-techinical explaination is of use either to you, or to someone googling how to make jekyll compile/process and watch for changes in .sccs files.
I have a styles folder in my project. Inside it I have the following folders: css, scss, css-maps. I want the following: when I update a scss file in scss folder, I want it to create/update a css file with the same name in css folder and *.css.map file in css-maps folder.
|styles
|css
my-style.css
|css-maps
my-style.css.map
|scss
my-style.scss
I defined a SCSS watcher in my Intellij. It has the following settings:
Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --no-cache --update $FileName$:../css-maps/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$
Output paths to refresh: ../css/$FileNameWithoutExtension$.css:../css-maps/$FileNameWithoutExtension$.css.map
The problem is that it still outputs my-style.css.map to my css folder (and CSS file points to this map file), while in my css-maps folder it puts 2 files: my-style.css.map which looks exactly like the .css output file, and my-style.css.map.map. Yes, with double .map extension.
How can this be fixed?
Here is configuration I'm using, hope it will help:
Arguments: --sourcemap=none --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
Can I compile scss from project folder created with foundation new project with sass?
Why js folder had only app.js file, should I move files from bower_components/foundation/jsto (root)/js or link to their folder?
Should user css settings includes in app.css or custom file that includes app.css?
In bootstrap sass files collected in one folder, why in foundation scss folder had only app.scss and other files in bower components.
When you install Foundation this way, you use the SCSS folder created that contains the _settings.scss & app.scss. The app.scss is what you tend to use as your base SCSS file to compile from so you'd include all your other SCSS files to this one. You can move this file to elsewhere if you please but move the config.rb with it and make sure the add_import_path works from where you move it to.
You don't need to move the files, everything in bower_components should never be touched or moved, they are there so they can be upgraded when necessary, you shouldn't have to touch base Foundation files.
I said before you should use that, but you could include the app.scss into a custom scss file but it's better to have control of the Foundation imports in 1 file, in my opinion.
For the same reason i mentioned in 2, so you don't touch them and Bower can easily update them if you require.