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
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.
I'm trying to use PostCss with next.js which allow me only to add the main css file in the main _app.js file,
which make all the output style global,
how can I create css file for each page or even each component
As of Next.js version 9.2, it supports native css support.
As you said, if you import styles from _app.js file, they considered as global styles of your app.
Styles of components are considered "modules".
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.
All you need to do is call your css files with *.module.css suffix.
Check the official docs
I have 2 html files linked to each other and have different css files for each of them, but meteor merges them automatically.
How do I stop this?
You cannot. Meteor merges CSS to optimize its network delivery.
If you want to choose the order your stylesheets have in the merged CSS you may need to :
- Use a language as SASS, LESS or Stylus which allow to generate css so you could do #import 'imports/ui/yourstylesheet.scss' to #import files in the order you want. Note that if you choose to use a language as SASS or LESS you need to put your sass/less files that you want to import into /imports so you manually import them (puting files anywhere else than in /imports makes your files automatically imported). And import these files via a SASS/LESS/stylus file in the /client folder.
OR
- Put your css in /client folder and understand the Meteor's rules to choose in which order your css get loaded :
The JavaScript and CSS files in an application are loaded according to
these rules:
Files in subdirectories are loaded before files in parent directories,
so that files in the deepest subdirectory are loaded first, and files
in the root directory are loaded last.
Within a directory, files are loaded in alphabetical order by
filename.
After sorting as described above, all files under directories named
lib are moved before everything else (preserving their order).
Finally, all files that match main.* are moved after everything else
(preserving their order).
OR
- You put your .css in the /imports directory (so Meteor doesn't import them automatically so you can choose in which order you load css files). And you import your css via a .js (javascript) file put into /client (as files into /client are loaded on your browser). In the .js file you do import '/imports/ui/mystylesheet.css' to import your css.
The cons of the three methods are respectively :
- You have to learn a language if you don't know any of these languages : stylus less or sass.
- Relying on complex rules to choose the order your css get loaded is probably not maintainable and oblige you to have specific names for your css
- css files loaded within a .js file are put in a <style> tag inside the DOM instead of being loaded in a separate .css file (which is not recommended). Besides the css loaded this way doesn't use the toolchain offered by Meteor plugins (compression of CSS, add pre-vendor prefixed to maximize the compatibility of your css and whatever the plugin you have offers you).
You can carefully change the order of load. Such as to make one override the other.
For example consider the following file structure
|-client
|-imports
|-ui
|-page1
|-page1.html
|-page1.js
|-page1.css
|-page2
|-page2.html
|-page2.js
|-page3.css
Here, page1.js will import page1.css and this css will be applied to the template in page1.html
Similarly, page2.js can import page2.css and the same will be applied when the page2.html is rendered.
You can add your css class to the template when calling the route if you are using the iron router.
Router.route('/addMemberProfile',{
onBeforeAction: function () {
$('body').addClass('your required class for this template');
this.next();
},
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
I'm using GWT in a new project that I'm working on and I'm facing a problem. Some of the CSS rules were defined into the XML file and not into a CSS file.
The problem is that when GWT compiles the code, my name classes defined into my XML file are changed to a new random ID.
Stuffs like GKA-VPPBPE or GKA-VPPBLE
Is there is a way to keep the original name instead of the generated ones?
The generation of obfuscated css classnames is a feature.
GWT has enabled CSS obfuscation activated by default. This will help reduce the download size and also reduce collision of css-classnames.
You can disable this in general:
<set-configuration-property name="CssResource.style" value="pretty"/>
Or for some classes only:
#external .myClassName
Look here for some more information
https://vcfvct.wordpress.com/2013/10/04/disable-obfuscation-in-gwt-css-resources/