I am using Storybook with a React project that also uses styled-components. Many of those style definitions access CSS variable values that are defined in :root in an index.css file at the root of the src directory. All of the CSS variables defined this way are just placeholders for colors. However, when the components are rendered in Storybook the values of the CSS variables aren't being accessed and so those colors never render/display.
Is there a way, either via a plugin or configuration, to make it so the CSS variables I am defining in my index.css file are accessible to the components when they are rendered in Storybook?
You can import CSS file in the .storybook/preview.js file:
import '../src/index.css';
// ... rest of the settings
This way it will be available across all pages in your Storybook.
Related
I'm working on a table component which one will be usable (included in a library when it will work correctly)in any of my projects.
As there is a lot of css rules related to this component I would like to put the style outside of the component svelte file.
What I did is writing a separate css file which I import in the component svelte file by :
import './table.css';
But in such a case I can see my rules in the built bundle.css file but these are not scoped to my component.
So I'm wondering if there is way of doing it as I would like or not....
yes, when svelte-preprocess is set up, you can use <style src="./table.css"></style> in the .svelte file
https://github.com/sveltejs/svelte-preprocess#external-files
...https://discord.com/channels/457912077277855764/945368391231864832/945369571680997416
I am working on an angular design library based on bootstrap, similar to ng-bootstrap
I currently created multiples modules for each design component that can be imported separately based on user needs.
ex :
src/
modules/
inputs/
buttons/
navs/
tooltips/
....
Each module can be imported independently and used in application.
The problem I face is with bootstrap scss. Has explained here we can import all bootstrap with
#import "../node_modules/bootstrap/scss/bootstrap";
or by chunk
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
I would like each of my modules to import their specific scss files. The table would import the tables scss, the navs the navs etc...
Since bootstrap files are scss they need to be compiled before added to the page, and the easy solution of manually adding in each module a stylesheet element would not work.
In ng-bootstrap they require users to manually add each bootstrap scss that they wish to use, but this could be kind of a pain for users since they need to manually add a module and the associated styles.
Are there any solution to bind a scss file to a module, and compile it if that module is used in the app ?
I would follow in the footsteps of Angular Material's implementation and provide users of your library instructions on how to include the design library styles default styles or custom styles. Take a look at Angular Materials build code and the corresponding exported assets made available as an NPM package. Essentially to manually import a single SCSS file per module that is imported as described above a user would need to take the following steps and understand the styles will be applied globally. There is no dynamic inclusion and compilation of SCSS in Angular upon loading of a module the chunks under the hood would need to be recompiled and the styles would be preprocessed again.
In angular.json under the "build.options" object modify "styles" and "stylePreprocessorOptions" and update the configuration to point to the new global styles directory "entry" such as "styles":["src/styles/styles.scss"], "stylePreprocessorOptions": { "includePaths": [ "styles" ] } then in styles.scss import your bootstrap scss. Under the styles directory you can now create a custom directory structure and the angular compiler will be able to find everything imported in the global "styles.scss" file. Further reading: read about the shadow DOM in Angular in the context of styles applied based on view encapsulation for component scoped styles vs. globally applied styles.
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 use nativescript with VueJs
My problem is that my page specified CSS files aren't used.
My start page is start.js and in the same folder I have a start.css
but the styles aren't applied.
Do I need to something else, or configure?
Because at the docs I said that it normally should work like this.
Always refer the appropriate docs for the flavour, since you are using Vue you must follow the docs here. What you were referring to was for core js one.
With NativeScript Vue you have to write scoped styles within your component, just the same way how you would do it for a Vue based web app.
An external file can be used as Page-Specific CSS as follows in NativeScript-Vue:
<style scoped src="./Home.css"></style>
Where, Home.css is located in your components folder.
Similarly, for SCSS:
<style lang="scss" scoped src="./Home.scss"></style>
Note: You'll need to rebuild your app by if its running on an emulator/device when you make this addition to your .Vue file.
I have a project made with create-react-app, I didn't change the default webpack configuration. I'm using a third-party component, which imports several CSS files internally.
(in my component)
import OwlCarousel from 'react-owl-carousel';
(inside react-owl-carousel)
import "owl.carousel/dist/assets/owl.carousel.min.css";
import "owl.carousel/dist/assets/owl.theme.default.min.css";
I also import my custom styles to override defaults
(also in my component, below third-party component import)
import '../styles/pages/home.css';
it all works fine in development mode, both CSS files are included in separate <style> tags. However, when I build a production bundle, dist files are not added there, they are still loaded as <style> tags, while my CSS file is bundled along with the rest of project CSS files. Main CSS bundle is loaded before <style>s, making the override useless.
When I import the same styles directly from my component, they are bundled just fine, but the problem is still there, because they're loaded once again from the third-party component.
Is it possible to bundle the styles from the component? They are hardcoded there, I can't remove their import. If it's not going to work, can I at least change the tags order, making the CSS bundle last, after the <style> tags?