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?
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 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.
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 a VueJS application that uses Webpack 2.
I am working on VueJS and I will work with a webdesigner that will add CSS classes to the app. The designer wants to have 1 CSS file for the login page (login.css), 1 CSS file for after login (app.css), and etc. So the things is that it is not necessary to load app.css at the login page and vice versa. Besides that the CSS files may have the same classes but will be used for different things. Example: for body tag, he will use font-size 10px in login.css, and on app.css the same body tag he will use font-size 12px.
Now I import in my main.js file the CSS files:
import '../src/assets/css/login.css';
import '../src/assets/css/app.css';
This way whatever is on app.css overrides login.css.
So how can I load just the CSS files needed (when I need them) so that they will replace each other. Like, for login page load login.css then for after login load app.css?
Currently I am using in the webpack.config.js the following:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
You are currently inlining both of these styles in your javascript so everywhere you import main.js these styles will also be included.
You need to either be specific with your imports and use your import on the page where you need it(if you have a single page application).
If you don't have a SPA you need to extract the CSS from your imports to separate files which you can include yourself with a <link> tag. You can do this by using this Webpack plugin:
https://github.com/webpack-contrib/extract-text-webpack-plugin