With Polymer I can include my CSS styles in the element definition simply by adding a <style> tag. What I would like to do though is to add a preprocessor to those styles. Something like https://autoprefixer.github.io/ would be great.
Is there a way to do so without an external CSS file?
Use a build step to extract inline resources to separate files - something like gulp-html-extract.
Once you have the source extracted, you can process it separately.
You would then use a tool like Vulcanize to re-inline your styles back into your main component.
Related
I am gonna use css global variables in scss file so that I can change the button colour in any time.
I want to do like this:
:root {
--button-color: #FF0000;
}
$button-color: var(--button-color);
...
But this makes the issue now.
SASS variables are compile time and final value depends on all files were #import in line. CSS variables are run-time and are calculated based on cascade(say if any parent element redeclares variable - it will be applied to children).
Also take a look into docs section on difference between
You can use css-vars to compile SASS variables into CSS custom properties. But you still cannot use CSS custom properties in SASS code, say, to calculate some value - since CSS property is not initialized yet.
Even with css-vars plugins, things are rather messy, because SASS files does not describe how component tree looks like finally so we cannot see cascade.
TL;DR; don't mix SASS variables and CSS custom properties. Use first for compile-time variables/calculation only and use latest one for run-time/cascade-based styling. Probably prefer using CSS custom properties only.
Angular cli automatically loads css files those are in node_module directory. I am using #swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.
In your app.component.ts, add:
#Componenent({
encapsulation:ViewEncapsulation.None,
styleUrls:[''], // Add your bootstrap css files
templateUrl: ....
})
If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.
If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.
I'd recommend the first approach.
If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.
I'm looking for a simple way to select an existing react element in my css. I've tried searching it but only found confusing answers about tons of libraries I can use, and none seemed to fit what I'm trying to do.
I want to have a regular .scss file, where if I have the react element called Foo, I can do something like this:
Foo {
color: red;
}
This would be great because I could continue with .scss files which I like, and could select components. How can I do this (or achieve similar behaviour)?
Notice that I'm not the one creating the element so I can't just apply a class to all of them.
You can do it easily, by adding className=Foo and called it in Sass by(.Foo) and by using compiler program to convert Sass to CSS such as (Prepros) and call the CSS file as a link to your main HTML file
I have some h1, h2, h3 and a lot of bootstrap snippets that I want to apply only to a specific part of my site, I added a unique class, say .unique but it would take hours to prefix over 1000 of CSS lines
I use sublime text
Thanks in advance
You could use a CSS-preprocessor like LESS or SASS (there are more). Both can do what you want, by just doing this:
.unique {
// Old CSS goes here
}
The have many other advantages over normal CSS.
common I would like to give you some ideas, cause i think your question has something to do with control css overriding.
the Jost's LESS or SASS solution is very good actually to prefix cause can use nested css features, but it requires a compile process, their eventually compiled files are still css. cause the .less or .sass files can not be recognized for html to render styling.
Another thinking To avoid css conflicts and wrong overriding,
Instead of including global styling, see if you can embed them in part of the specific section/page where they can get higher priorities than the rest global styles.
even the same css, generally, !important > inline css > internal css > external css
or javascript can trigger css override after previous css finished rendering on the page.
Instead of using css priorities or script running priorities to override styles, making two external mobile.css, destop.css for example, then using javascript to reload page to include different stylesheet when device width are detected to have been changed in browser resizing behavior.(This is one pop way used in responsive view)
using IDE to locate css patterns and replace them with your prefix if it's simple to match all the patterns.
I have a web page, Page-A, that uses a primary css file. I have other pages, Page-B, that use another primary css file. I'd like to use two classes of the Page-B css file into Page-A, but I do not want to override other classes and functions of Page-A css with this Page-B css file.
Is it possible to import only two classes of a css file instead of all its classes. In other words, is it possible to constrain an #import or link to load only a few classes?
What you could do is mark the classes that will be overriding everything with the !important tag in CSS, which means that it will not be overridden.
I would just input the two classes you want into the Page-A css file, as there is unfortunately no way to just import certain classes.
I would suggest making one master CSS file and input into both pages, that way all of your changes are reflected on both pages.
No. It's not possible.
But: You can still prefix your CSS rules with a class or an ID. It can helps you work with specificity (http://bit.ly/1aODhdu) and with rule importance.
You can also prefix CSS rule which will be applied-only for some nodes like html.one div html.two div so after load second CSS file will be still ignored.
No, it is not possible to import specific classes from a CSS file.
The correct way to do this would be to create a master CSS file, which all your webpages can share.
Delete the classes you need from PageBs css(OPTIONAL), add them to a new CSS file.
Link the new file to both the pages.
This way you will not override any classes and have a CSS file which has all the shared classes both pages need.