Say my Main.scss file has this:
#import "TestFile";
Then I run:
sass --source-map Main.scss Main.css
Then the generated source map will have:
sources: ["main.scss","testfile.scss"]
This will cause file not found in case-sensitive web server, http://xxx.xxx.xxx/testfile.scss will not get the content from http://xxx.xxx.xxx/TestFile.scss
May I know if this is by design? And if there is any walkaround to make the generated source list match the original file name case?
Thanks!
Related
I have two scss files in a folder scss which will be included into a primary app.scss file. All of these are transpiled to corresponding css files in /css folder:
scss/global/swatches.scss:
$swatch-bg: rgba(30,30,45,1);
scss/global/panels.scss
.panel {
background-color: $swatch-bg;
}
And then they are both included in my app.scss file:
scss/app.scss:
#import 'global/swatches.scss';
#import 'global/panels.scss';
and then I run:
sass --watch scss:css
This correctly creates all expected files inthe css/folder.
However, if I now modify panels.scss which contains a reference to a variable (imported in app.scss) the watcher complains it can't find the variable. But if I edit and save app.scss after, it will correctly compile and the variable is correctly parsed too.
So it seems, if I edit app.scss, any variables defined in any of the imported files will be available to subsequent imported files when sass is compiling. But this is only true when editing app.scss.
How can I get it to compile correctly without having to add the same imports to each file? Is what I am trying to do even possible?
I managed to resolve this by using partials instead in the following manner:
Firstly, rename all my imports to include a prefix, for example:
global/_swatches.scss
and then in my main file (app.scss) import is as follows:
#import 'global/swatches';
Notice the lack of the underscore and .scss file extension
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
I'm taking my first steps in PhpStorm and SASS. I went to File > Settings > File Watcher and I added SCSS
This is my current configuration:
Program: C:\Ruby23\bin\scss.bat
Arguments: --no-cache --update $FileName$:$FileParentDir$\$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileParentDir$\$FileNameWithoutExtension$.css
And it's working in the following way. Given the structure:
/mysite
/sass
1.scss
2.scss
3.scss
when I add a SCSS file to /sass it generates .css and .css.map files inside /mysite. However, I want to generate just one CSS file inside /mysite and avoid the map files. How can I do this?
if you have a primary SCSS file that imports other files (partials, their names usually start with underscore), you just need to make sure that 'Track only root files' is enabled in File watcher settings to get the output merged into a single .css
If you don't like .map files being created, pass --sourcemap=none to compiler
I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
When using Scout, is there a way to prevent it from compiling every SCSS file? I use one main SCSS file to import all dependency SCSS, thus only need the one CSS file output, as opposed to one CSS for each SCSS.
Files prefixed with an underscore do not get compiled to a CSS file. This is a standard Sass feature. Only the first file listed here will have a corresponding CSS file generated:
i-am-compiled.scss
_i-am-not-compiled.scss
_i-am-also-not-compiled.scss