I use the following code to load YUI modules.
YUI().use('tabview', 'datatable', 'datasource-local', 'node', 'node-load', function(Y)
{
......
});
This would load the modules and ALL of the respective CSS files.
But I want to use the CSS selectively. Let's say I don't want to load CSS for TabView.
How can I achieve that?
I tried the following -
YUI({ fetchCSS: false }).use('tabview', 'datatable', 'datasource-local', 'node', 'node-load', function (Y)
{
......
});
Its obvious that the above code would not load CSS files for any module.
How can I disable CSS for tabview so that I can use my own?
There is 'override' property in the skin config. That allows you to use differents skin for some modules.
You may create a skin with your own css file, and tell the loader to use this skin for the module you want (tabview in your example).
I'm not sure you can have different source folder for the differents skins though.
http://yuilibrary.com/yui/docs/api/classes/config.html#property_skin
You can also try to define a css module and 'use' it.
http://yuilibrary.com/yui/docs/api/classes/config.html#property_modules
I hope it helps you!
Related
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
Using Webpacker I can load css files and they get output in the stylesheet pack files, but sometimes I'd like to access the CSS in these files from within javascript for use say in a WYSIWYG editor's config (specifying some extra styles for the IFRAME). The other option is to be able to access the public path of a css file loaded in like so:
import froala_style from '../../../css/froala.css'
My suspicion is that it's to do with the css loader that comes with Webpacker. Its job is to load the css and compile it out to a seperate file. I think that one can't have two css loaders at the same time? Could the answer be to apply filters to a custom loader so that it takes effect on only the file I'm wanting to load in as text or the path?
One can override the existing loaders for a particular import like so:
import froala_style from '!css-loader!../../../css/froala.css'
Prepending the ! overrides existing loaders allowing us to specify our own. In this example one can call froala_style.toString() to receive the contents of the CSS file.
For reference: https://webpack.js.org/concepts/loaders/#inline
I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.
One way we are doing these things is having multiple files for different themes. Example content =
variables ...
primary: '#smtng'
.themeName{
.header{
background-color: primary
}
}
And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.
Basically you are loading all themes, but only rendering css for active theme
I'm using https://github.com/mxstbr/react-boilerplate for a project, which uses CSS Modules and postCSS for the styles, which is great. However, I also need to have some global CSS files for typography, base components, etc. What is the best practice for how these should be added in? I've looked at using preCSS but not entirely sure how to set it up within webpack, so that it can import these global files into the main stylesheet. I'm new to webpack (come from a Gulp/Grunt background, using Sass) so any help here would be much appreciated.
It would also be great if I could use the variables and mixins defined in these files in the CSS Module files, but unsure if this is possible or advised. I've installed react-css-modules so that I can use styleName to refer to the CSS Module file and className to refer to the global CSS classes.
I know there is the composes: class from '/path/to/file.css'; attribute but I would prefer to have some global files where various utility classes are defined, such as clearfix and error classes, etc. So using react-css-modules, it would look something like this:
<div className="clearfix" styleName="app-header">{...}</div>
Again, not sure if this is correct.
I want to stick to best practices as I'm working on an open-source project and want it to be done in the best way possible. Thanks for any advice!
css-modules provides :global that can be used to include locally in your code css files that will included globally in application
I did come across this problem when I wanted to use a 3rd party library that requires some css files that are directly referenced in the js templates (by class name strings) and css modules were not supported. As I did not want to change the css files by adding :global modifier (because they are 3rd party and might change in the future), I've figure out there is a mode setting in the css-loader that you can use to preserve original names for certain files.
How it works:
There is a mode setting in the in the css-loader that (beside other options) accepts a function. It takes a resourcePath as an argument and returns values local, global and pure. Global keeps all the name as they were defined in the original file, while local uses standard hashing as defined. This is handy for third party libraries that don't work with css modules.
I've written a short function that checks the the resourcePath for modules that should stay global. Seems to work fine for me, the only disadvantage is that I have to write it twice (development and production setting).
Here is the development env example:
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]_[local]_[hash:base64:6]',
exportLocalsConvention: 'camelCase',
mode: (resourcePath) => {
let globalStyles = ['module-to-stay-global-1', 'module-to-stay-global-2'];
return globalStyles.some(globalFile => resourcePath.includes(globalFile)) ? 'global' : 'local'
}
},
}
}
Documentation to the mode function can be found here:
https://github.com/webpack-contrib/css-loader#function-3
We use
[Embed(source="assets/styles/basic/my_skins.swf",symbol="preloader_3")]
private var PreloaderAnim:Class;
for embedding a movieclip from an swf file.
How can I do the same using a CSS file (which is loaded at runtime) and use it in my class?
You can do it in a way like this:
1) In your css file declare a new style. For example:
.myPreloader {
skin: Embed(source="assets/styles/basic/my_skins.swf", symbol="preloader_3");
}
2) Anywhere you can access the class you need:
var PreloaderAnim:Class = StyleManager.getStyleDeclaration(".myPreloader").getStyle("skin");
That's it. You can use PreloaderAnim variable as you want. For example, you can create new movie clip.
You need to remember that runtime flex CSS with embedded assets is also an swf. So if you wan't to load an swf you should probably just go ahead and load it without additional embedding. If you're, however, planning to use the swf symbols as part of the skin you should use something similiar to this:
style.css:
ComboBox.Styled
{
skin: Embed(source='skin/some_file.swf', symbol='ComboBoxSkinInSomeFile');
}
I'm almost sure you can't just use the CSS as a container for symbols, without defining them as a part of some style.
For more info on how to compile css to swf look here: Blog post