for a good practice,In which directory we keep multiple css files like ( style.min.css , font.awesome.css) in Angular4
you have to use webpack and it`s plugins like css-loader and style-loader
then import them in you appComponent.ts:
for example:
import '/assets/style.css';
css file will load and inject automatically to page when you run webpack build.
Related
In a React app, we usually import CSS files into the JavaScript components.
I thought this way we inject the CSS into the final JavaScript build.
However, it seems that React (at least create-react-app) still generates separate CSS files.
Why is that?
Is there any way to force CSS stylings to be part of the final r? Kind of CSS-In-JS?
You should eject the create-react-app and change webpack config file (style-loader similar question) to not create separate file for css bundle or use html-inline-css-webpack-plugin.
I followed by instructions included in Bootstrap documentation https://getbootstrap.com/docs/4.0/getting-started/download/#npm and installed Bootstrap via Webpack.
Then I wanted to import css styles as here https://getbootstrap.com/docs/4.0/getting-started/theming/ AND
I'VE ENCOUNTERED A PROBLEM:
When I adding this import (#import "node_modules/bootstrap/scss/bootstrap";) to my custom.scss file and order sass --watch custom.scss:custom.css in the console I'm getting this two errors:
1) Error: Cannot find module
"-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!../../node_modules/bootstrap/scss"
2)./src/tu_sassy/custom.css Module not found: Can't resolve
'../../node_modules/bootstrap/scss' in
'/home/zebra/Desktop/testowa/src/tu_sassy'
My file structure is similar as in Bootstrap documentation, included as screenshot below.
!For more I need to add that when I delete this import from custom.scss everything works like a charm ...AND is still reusable and non-corrupted to original Bootstrap stylesheet 'my own stylesheet' WHY ?
One quick tip up front. If you want to write inline-code within your StackOverflow post, use backticks (`) around the code. That makes reading your post much easier.
Sass has its own functionality to import from node modules. Webpack Sass loader provides the ~ (tilde) prefix as a way to tell the compiler that it should resolve the path out of the node_modules folder.
#import "~bootstrap/scss/bootstrap";
If you have a dependency tree of packages within node_modues that import sass files, you can also tell Webpack Sass loader to include node_modules for resolving paths:
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}
my question is little subjective.
so the scenario is like- I have n numbers of react components. Each
components have its respective css file. There are few common css files which are inside
assets/css/ files. I am simply importing common css file to my react component css file if needed.
for Example:-
There is a assets/css/color.css file which is common and used by few of components. I am importing assets/css/color.css to those css files which needs it. This way I am importing assets/css/color.css many times to different css files.
My question is- When webpack starts bundling the code how does it handle multiple import of same css file? Does importing same css files at many places leads to redundancy in bundle file?
The answer given by How does webpack handle multiple files importing the same module React imply that webpack will only bundle each library only once.
That's true for JS modules. Each module is embeded only once and webpack reuse the instance where appropriate.
However if you include another file inside that file, then it's up to how the css webpack module manage it.
For raw CSS, I think the file will get included only once as all is managed directly by webpack.
However if you use the sass loader and import some other sass file from your first sass file like that:
1.js File -> includes a.sass file -> #import another.sass file
2.js File -> includes b.sass file -> #import another.sass file
Then if another.sass file generate some classes definition, you'll see that these classes appear multiple times in the output. This is because webpack doesn't know about the duplication because it's handled at the sass loader level.
I have a .css file that is hosted online. How can I import it in to my react component?
import mystyles from 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css';
this results in an error
Module not found: Error: Can't resolve 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css' in '/Users/busda001/code/electrode-app/src/client/components'
You have 2 choices to include CSS in your react project,
First, you can put the link in the main HTML project page which has all react project.
Second importing in your file.jsx as you do now, but you nee in this way CSS loader in your server, if you use webpack.config.js
use this link to learn what should you do,
How to include a CSS from bower_components using webpack dev server?
I am trying to import 'angular-ui-bootstrap' in the vendor.ts file.
I keep getting can not resolve angular-ui-bootstrap.
Any suggestions on how to get around this problem.
I want to remove the reference from my index.html and move it to the Vendor.ts file which webpack uses to bundle vendor files.
Thanks