I've set up my own (Bootstrap 3) scss mixins as it is done in Bootstrap itself:
a mixin folder in my scss folder (template). Like this:
-scss (with template.scss)
-- bootstrap
-- template/mixins
linked it in the file template.scss: #import "template/mixins";
Prepros doesn't accept it: "File to import not found or unreadable: template/mixins".
How do I set this up?
Found it. The folder was set up correctly, but the corresponding #import was not. One level too high. #import mixins shouldn't be in template.scss, but in the template folder itself as _mixins.scss
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
I created a new cli project with --style=sass and then defined some variables in the src/sass/styles.scss (no partials created) so they should be globally defined right? , so when i tried to use them in home.component.scss i got this error https://imgur.com/a/IckJL14
i then added a black border just to make sure normal css works and it did work , the problem is with sass ,
here's the angular.json
"styles": [
"src/sass/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/malihu-custom-scrollbar-
plugin/jquery.mCustomScrollbar.css",
"./node_modules/animate.css/animate.min.css",
edit: i then created a partial _variables.scss and in the component.scss i wrote #import '~sass/variables'; after importing them in the styles.scss like so #import './variables'; according to the guide from this link : https://scotch.io/tutorials/using-sass-with-the-angular-cli
still not working.
The best approach to achieve this, is creating a variable file and import this file in your scss files.
Like so:
#import "../../variables.scss";
or
#import "~variables.scss";
And in your styles.scss you just put a reference of your variable file!
If it's correct that you used the --style=sass option on project init, then that might be the problem. If you intend to use .scss files (which I would recommend), then you should have used --style=scss.
To fix this now, you can run the command ng set defaults.styleExt scss.
the answer was to simply add the full path to the component.scss like so,
#import "src/sass/~variables.scss"; instead of just #import "~variables.scss";
If I want to split my scss into multiple files, does every file need an import statement.
Eg if I have
_variables.scss,
Header.scss
Footer.scss
Content.scss
Will the (bottom) 3 files require imports in them (if they're using variables)
I want to have a final file eg Site.scss that merges the 3 with imports
or should the variables imports go in Site.scss too?
Every file needs an import statement, but they can all be in the root file.
Here's a great little tutorial that I've been following to make it work:
How to Structure a SASS Project
In your Site.scss file, import the _variables.scss at the top and all other files below it
#import 'variables';
#import 'Header';
#import 'Footer';
#import 'Content';
That way all other files can use the variables. You don't need to include _variables.scss in every other files.
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I have _header.scss, _footer.scss and _main.scss and I want to combine them all into one and generate style.css.
I know it has to do with file watchers, but I haven't been able to figure out how to combine multiple files into one.
Create file styles.scss that contain this code
#import 'header';
#import 'main';
#import 'footer';
It's not a PHPStorm feature, it's a SASS feature.
In style.scss it should start out with:
#import "_header";
#import "_footer";
#import "_main";
PHPStorm doesn't have to combine the files, Scss does.
#SlawaEremkin above is correct.
Be sure that the import file is named without an underscore (not a SASS partial) otherwise there won't be an output CSS file.
Correct
styles.scss
Incorrect
_styles.scss