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.
Related
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';
I'm developing an app in typescript (in Visual Studio 2015) and have this basic file structure:
Solution
AppProject
Scripts
framework
Utils.ts
app
SomeApp.ts
tsconfig.json
Now within the app modules, I would like to reference the framework modules with an absolute path, so I would do something like this:
import { Utils } from '/Scripts/framework/Utils'
However this doesn't work.
I'm getting the red squiggly line and a "Cannot find module '/Scripts/framework/Utils'"
I works fine when doing a relative path, but the app is obviously more complex than what is shown, and I don't want to deal with stepping out multiple levels for my relative path.
I am using typescript 1.8 with the node module resolution strategy.
And webpack to compile and bundle it, if that matters
Unfortunately I couldn't find anything on that in the docs. So I traced the file system accesses performed by the compiler (TypeScript 2.5.2) when trying to resolve an import of an absolute path.
The result is that / always refers to the file system root. Regardless of compilerOptions like rootDir, rootDirs or baseUrl.
I've run into a rather annoying issue.
We have a very large code base which is mostly legacy code, and we have just begun implementing bootstrap. We have to "namespace" or "wrap" the bootstrap code in a class so that we can apply bootstrap to only parts of a page without affecting anything else.
If you're familiar with this technique, the common workaround is this:
.bootstrap-wrapper {
#import (less) "bootstrap.css";
}
See this issue: https://github.com/less/less.js/issues/1709
This works great as long as bootstrap.css is not minified. For whatever reason (probably something to do with semicolons), the minified version is not valid less even though it is valid css, and the less compiler errors out.
This wouldn't be much of an issue, except we are using Web Essentials (for VS 2013 update 4) to automatically compile our less into minified css files, and there is no granularity whatsoever.
We have the option to compile the unminified css files turned off, because we have no use for them, and only need the minified files. Since Web Essentials is all or nothing, there's no way for me to compile the unminified file in just this one case. We would have to carry an extra css file for every single compiled less file just to support this one case.
Are there any alternatives to creating a wrapper class this way, or is there anything I can do with Web Essentials to make this work?
I have two packages with several polymer custom elements.
Each package imports the other
One package contains elements that use or derive from the elements in the other package.
The other package uses the elements from the imported package just in the demo pages to make them more appealing.
There are no circular dependencies between elements.
In each package I have a folder 'example' that contains a demo page for each custom element.
I use the transformers configuration in pubspec.yaml and pub build to build the Javascript version of the demo pages.
(Because pub build doesn't yet support the example directory for entry points I created a symbolic link web that points to examples.)
When I execute pub build the examples are built and several of them work fine.
Not all though because there are limitations with transformers:
pub build with transformers doesn't support imported packages that have transformers configured in pubspec.yaml.
So my new approach was as suggested at the Dart web-ui group
I created a new package
The new package imports the two packages with the custom elements.
I symlinked all example files from the two custom elements packages to the web/ and web/src directory of the new package.
When I execute pub build all seems fine but
when I open the demo pages and debug them I see none of the xxxChanged methods of any of the custom elements get called (except when they are called explicitly from enteredView attached or ready).
Other methods like enteredView attached or ready are called though.
A diff between the files (about 14k size) showed several smaller differences but the most (about 98%) are equal.
This generated code (not minified) is not easy to decipher at least not for me and I found no hint what could have caused these differences.
Any Idea what can be the source of that problem?
When I add
transformers:
- polymer:
entry_points:
(without any entry_points)
to the pubspec.yaml of the custom elements packages all works fine in JavaScript too.
EDIT
related issues
generated JavaScript for polymer elements dosn't call xxxChanged for published attributes
add support for global transformers in code_transformers
polymer transformer can only be used on the application package and not on a library package
add support for dev_transformers
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.