Imagine I have a company, and I'm going to create two blazor server projects: PayrollApp and WarehouseApp. I want both to look similar. I'm using sass to compile the css for the projects. I want to define/maintain "common" sass in one place and then extended it in each project. My thought was to create a separate project (as an RCL?) named CompanyStyles with scss files like this:
CompanyStyles/wwwroot/scss/_colors.scss
The _colors.scss file looks like:
$primaryColor: red;
$secondaryColor: green;
Then I would add this CompanyStyles project to the PayrollApp project as a dependency.
In the PayrollApp project I'd have a file like:
PayrollApp/wwwroot/scss/payrollList.scss
The payrollList.scss file looks like:
#use '_content/CompanyStyles/scss/colors'; // this or anything similar won't compile
h1.employee { color: colors.$primaryColor; }
When I try to compile payrollList.scss of PayrollApp, the dart-sass compiler tells me "Can't find stylesheet to import."
How can I get access to (aka #use) the sass variables (and mixins etc) that's inside the external project CompanyStyles?. Or if this approach is wrong, how would I have a common base of sass that I only need to maintain once?
I can't see anything wrong with that approach, makes sense to only edit in one place. Seems to me like it's just the file path. I don't know much about blazor, but are you not missing wwwroot/ from the path in the #use rule?
eg.
#use '_content/CompanyStyles/wwwroot/scss/colors';
Related
I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)
I currently have the following structure:
However I cannot reference a main.css file as it is not found and if in a component I put something like this
styleUrls: ['lib/assets/sass/main.scss']
The webdev serve command fails
My pubscpec is
dependencies:
angular: ^5.0.0
angular_components: ^0.9.0
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
sass_builder: ^2.1.1
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
mockito: ^3.0.0
test: ^1.3.2
I cannot figure out what's wrong and also the structure I should use
Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve
Thanks,
Alexi
So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'
I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.
AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.
One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.
For example, a lot of the SASS I have been writing require and use the mixins from bootstrap. However, I would like everything to not be complied into one large file. So for example in a main.scss I could have:
#import 'bootstrap/assets/stylesheets/_bootstrap';
#import '_mypage'
#import '_mypage2'
but when you compile the file it would just end up as one file where I am trying to get it so I have bootstrap, mypage, and mypag2 as separate css file, while maintain the ability to use the bootstrap.
Is there a way to do this in sass? Or should I be looking at certain tools to achieve this goal?
IIRC, the _ in front of SCSS files is what tells the compiler not to make its own file. What you're telling the compiler with your #import lines is that you want all of those files to be added to the top of your main.scss.
If you make a mypage.scss, and put it in the same directory where the compiler is looking, it will compile to its own file. You can either import bootstrap at the top of that file as well, or just load earlier it in your HTML to be able to reference it.
I've been using Prepros lately which performs some magic automatically, decided to move to Gulp and I'm in trouble, I guess.
I have multpiple scss files such as:
mixins.scss (here I store all the mixins)
variables.scss (variables here)
colors.scss (and colors)
base.scss (base styles for my app)
app.scss (here I import mixins, variables, colors and base - in that order)
Now, with Prepros it used to work like this - first all the files were imported to app.scss, then beautiful app.css file was generated, easy and painless.
Gulp, I assume, tries to compile every single one of these files separately and fails at base.scss, because I use mixins/variables/colors there and Gulp is unaware of these.
How can I fix that? I was thinking maybe watching app.scss alone would fix the problem, but then app.scss wouldn't even know if there were any changes to variables.scss for example.
My default Gulp task looks like this:
// default task for "gulp"
gulp.task('default', ['sass'], function() {
gulp.watch('./assets/scss/*.scss', function() {
gulp.run('sass');
});
});
Any hints?
Are you 100% sure all your partials files (mixins, variables, etc) are properly named ?
This is, they start with an underscore, ie: _variables.scss, _mixins.scss, etc.
This seems the issue for you, is not a gulp problem, but a sass one.
This way you tell sass compiler that those files should not be compiled.
From sass docs:
The underscore lets Sass know that the file is only a partial file and
that it should not be generated into a CSS file. Sass partials are
used with the #import directive.
My problem: I want to use some compass features (mostly sprites generation and css3 mixins), but I don't want to create a compass project for it. My project structure should be a bit more complicated than compass allows me to create. So I'd like to stay in my project with sass, but import and use some compass features in it. Is it possible?
Compass IS able to manage all your stuff. Just give it a try.
Here's an example, this is the structure of a Compass project i'm currently working on:
First of all, you should have a folder like sass where you store your non-partial SASS files, e. g. sass/style.sass or sass/screen.scss. Your config.rb should point at it.
Then create a subfolder called partials where you store all the stuff.
In partials subfolder you start creating the structure:
sass/
partials/
_global.sass
_modules.sass
style.sass
The contents of your style.sass should be like this:
#import partials/global
#import partials/modules
This structure is easily extendable. Once your partial grows large and you decide to split it, just create a subfolder named after the partial, create smaller partials there and import them from the initial partial:
sass/
partials/
global/
_extendables.sass
_functions.sass
_mixins.sass
_variables.sass
_global.sass
_modules.sass
style.sass
Contents of _global.sass:
#import global/extendables
#import global/functions
#import global/mixins
#import global/variables
This makes your project structure easily extendable.
Note that if you're using the SCSS syntax, quotes are necessary in the import statements, e. g. #import "global/extendables";.
If the imports aren't working for you, please share your project structure, the exact code you use and the error text you receive.
I have created my own set of custom SCSS frameworks that I want to use between projects.
This video shows how to do this. However, I am having some problems:
1) The Path to your custom SCSS framework has to be absolute
According to the video, the path to your frame work must be absolute (e.g. load "/Users/USERNAME/ frameworks/MYFRAMEWORK"). Is there a way to make this relative, so if I change machines the framework reference will still be correct?
2) In my custom framework, I have included some webfonts. When the stylesheet is complied, the paths to these fonts is wrong. Is there a way to make the fonts included in my project?
In the end, I used Codekit for this: http://incident57.com/codekit/
It's really easy. Just have a folder on a computer that contains your framework and then set it as a Codekit framework.
You can then use the import command from any SCSS file to import files from the framework.
You can even have a javascript/jquery file framework.
This is easily the best tool for Web Development. I can't imagine development without it.