I have structure like this:
Where I am trying to setup SCSS file watcher.
Here are my current options:
My goal is to compile
../scss/style.scss to ../css/style.css
../scss/user/profile.scss to ../css/user/profile.css
How to setup my setting in file watcher to achieve this pattern?
If it's possible for your project, consider using compass to compile your scss. By doing it this way, regardless of file structure in scss directory, after compilation
will be this structure mirrored in css directory.
It is quite easy to setup, there is also a good guide to read: PhpStorm / Working with SASS and SCSS in Compass Projects
Basically you need to:
Install compass: gem install compass
cd to public\themes\701 directory and run compass init, configuration file config.rb will be created here, edit this configuration to reflect your directory structure
Enable Compass support in settings:
File > Setting > Languages & Frameworks > Compass
Now setup File Watcher like in picture:
$ProjectFileDir$\public\themes\701 is full path to directory with config.rb file.
This will compile scss files to css directory as requested.
Related
So I installed Sass for my project via the CLI npm install -g sass but the CSS that I entered is not displaying. So after creating my style.scss file and entering my code, I compiled it using live sass compiler. As a result, the style.css and style.css.map files appeared (like they should). I then went into my html file and imported it.
Am I importing my CSS file correctly into my HTML file? If you see below, I thought this how it should be done. I am not using any framework for this particular project.
Not sure what to be looking out for when issues like this arise, so any leads are appreciated.
My HTML file
My SASS file
I have start using SCSS for the frontend, and can setup it correctly with PhpStorm on the a MacBook Pro with Mojave installed.
First I install the npm:
Then I setup the file watcher:
But it does not work. Something what I not seeing here?
If you like the .css files to be generated in the same folder as original file, try the following settings:
Note the Create output file from stdout option - it has to be enabled, as node-sass writes CSS to stdout unless the -o option is passed.
If you like to place generated files in a separate folder, use the -o option:
I learned to do a working environment based bower, from there install yoeman and gulp and materialize, I made a web page to root of all this, now I want to upload a host (like 000webhost or firebase) but I do not know which files are the ones I should upload
thx
You should upload everything except bower_components directory since it's content is used only when you compile down the things using gulp on your local machine. Once all your source files are piped through gulp, they are not required on the destination location. None of those files is or should be used during a http request.
I don't know exactly what is your project's structure, but because you specified what you use (bower, gulp) then I can deduct.
So after gulp finishes it's work, you have a public directory where all your combined, minified and copied assets live. This is obviously needed on the server, in your markup, you should refer to those files, not the ones fetched by bower when you've done bower install library1 --save. bower install library2 --save.
I'm completely stumped. I have tried to the best of my being to fix this.
I have a SCSS file, that has a watcher on it, but the watcher does not seem to be working. A normal CSS file is not being made at all. Here is my SCSS file:
As well, I am using the WebStorm IDE.
Error message:
An exception occurred while executing watcher 'SCSS'. Watcher has been disabled. Fix it.: Cannot run program "C:\Users\Luke\WebstormProjects\untitled\myTestWebsite\main.scss" (in directory "C:\Users\Luke\WebstormProjects\untitled\myTestWebsite"): CreateProcess error=193, %1 is not a valid Win32 application
Program path:
Your Program should point to the Sass Gem of Ruby instead you are pointing to your scss file. This is not correct:
Find the sass.bat file on your computer and use the path to that file in the program value
in my case the correct path is: c:\Ruby22\bin\sass.bat
Webstorm automatically watches every scss file you create and creates a css file. You do not need to create a file watcher for every independent scss file
Small detail: I should add --style compressed to the arguments. This creates a minified version of the css file and the load time is decreased
I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.