I made a NPM package which contains a CSS file which I have to include in my main CSS file.
In a normal html CSS website I have to write #import url("./node_modules/web-creative-fonts/index.css") but what I want to do is that we just have to write #import "web-creative-fonts" .
I studied a bit about it and found that we can make a webpack.config.js to do it ,but I am not able to figure out how.
Can anyone help?
I think you can use something like css-loader. It's a Webpack plugin that makes importing CSS from NPM a breeze.
Related
Link to project picture
I am creating a project in react and needed bootstrap. But it is overriding my custom css. Some of default bootstrap changing my headings. I have tried everything like putting my css link below bootstrap and also importing it into my index.js file but nothing working. i have attached the picture of my project.
Try maybe using bootstrap as a dependency:
npm i bootstrap
and import in index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
or even try a react-bootstrap dependency
npm i react-bootstrap
Bootstrap is written with !important rules, so they has the highest priority if given!
Maybe you can try inline css in React elements (although not recomended in a simple HTML)
All the best!
As you haven't added any codes example or link of your live project, please check if CSS file has been linked properly. Go to page source and click on styles.css. It should open all your codes inside CSS file. If you can't open this file, or there's nothing found, you should check CSS file linking once again.
But if you can see css file properly but still not working, as a final option, you can use "!important" in CSS class. It will work fine.
Install bootstrap as npm package using npm i bootstrap. Then place your styles.css in the src folder and import styles.css in your App.jsx.
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.css'
Or you can even try using !important. This will definitely work but you will need to to it every time you want to override a style.
As mentioned, bootstrap adds !important to seemingly everything. In order to remove all of them you'll need to install the npm package instead of linking to a CDN (like you're currently doing). So:
npm install bootstrap or yarn add bootstrap
Then create an app.scss (naming is arbitrary here) and add the following lines
$enable-important-utilities: false; //this disables !important
#import "../../node_modules/bootstrap/scss/bootstrap";
Then, import that app.scss file into your index.js file:
import './app.scss'
The next time your run npm start (or whatever command you're using) it should generate a new css file to use. You may need to install sass if your project isn't already using it. But, that's beyond the scope of this answer.
I'm starting to learn by my own and I tried for the first time to use sass in order to get more clean my code, having everything on sections. So the problem is when I try to give some styles to the navbar, I don't know why when I write code it doesn't apply. Maybe is because I'm not linking correctly or just using bad the sass compiler.
The best option to help me is take a look into my repository where I started to build this project to practice. I really hope could help me because I want to create differents sections like navbar, body, articles, footer using sass and give them styles.
https://github.com/Shylex96/test-portfolio
Edit: After a long search about this issue I see there is a problem with "use" and I have to change rules or something like that, but still don't know.
Replace #use with #import in your scss files.
Try updating your \util\style.scss like below:
#import '../globals/';
#import '../components/';
Save and compile them then copy the resulting css files to dist folder if they weren't copied automatically.
Update the stylesheet link in your index.html file to:
<link rel="stylesheet" type="text/css" href="dist/style.css">
It should be "dist/style.css" not "/dist/style.css"
FINALLY!! I solved it and I'm going to commit what helps me if someone have same issues..
I had to reinstall node.js, install gulp, and change "about_Execution_Policies" from windows.. when I did, I could finally install gulp correctly and then I install again sass. Of course, I just converted all the changes that people told me about into the first ones I had.
I created a new file called gulpfie.js and two more files: .gitignore and .gitattributes
So, If someone need it, can check the changes here: https://github.com/Shylex96/test-portfolio
I'm using Sage, a WordPress framework, and it lets you choose during creation some css frameworks, but I want to use Materialize CSS instead.
It uses Webpack to build and combine the .scss files into one. I did an npm install materialize-css so it's in my node_modules. In my project structure, I made an scss file that's used to import the module basically.
I also have bulma in this build, included via the original creation, so I can try to see how the structure is setup. It uses the following import statement:
#import "~bulma";
This works. I'm so confused about how this works. I think the ~ (tilde) tells Webpack something, but I don't know what. What I figured is that Webpacks checks the package.json file or something and finds it in the node_modules.
I've tried #import "~materialize-css"; with no luck.
Can someone explain what the heck Webpack is doing? Haha, because I can't find any documentation on this.
Here are the node_module folder structures, maybe this has something to do with it:
Perhaps the root of Bulma is bulma.sass yet for Materialize-CSS, there's no file, it's in sass/materialize.scss.
If needed, here's the github for the Sage framework, the webpack.config.js is in the build folder: https://github.com/roots/sage/tree/master/resources/assets
You have to specific the file you want to import also like this
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
#import "~toastr/toastr";
I haven't used SASS or SCSS in anything besides codepen before so apologies if this is a basic question, but my CSS was working fine, but I wanted to nest some tags, and when I setup the SCSS and SASS dependencies and changed my filename to .scss, all of my formatting went away. I read something somewhere about importing an scss file into the css file, but I'm not really sure how to accomplish that.
Here's a link to the code sandbox: https://codesandbox.io/s/oj15rk1vw9
Use the Parcel Bundler template instead of the create-react-app template
Also if you're using react add react and react-dom as dependencies since the Parcel Bundler template only comes with parcel as a dev dependency
https://codesandbox.io/s/q7877ov756
If you just change all instances of style.css to style.scss then it'll work
I'm trying to make a jekyll blog using foundation and sass, and I just can't seem to get the foundation sass to compile correctly. When I build jekyll, there are no errors, and the partial I wrote seems to load correctly, and foundation seems to import, but only the comments at the top.
My process so far was basically to run
npm install foundation-sites --save
move the foundation sass stuff out of the node_modules folder, and then include foundation in my scss file.
You can see the directory and the css file that is output in the following screenshots.
I'm kind of not sure what else I can try at this point any help would be appreciated! Thanks!
Edit: Here is a link to the branch and repo for this to see the code. https://github.com/samuraiseoul/kimchiChingu/tree/23-sass
Hmm.. it seems like all the partials imported in foundation.scss are just sass functions, mixins and variables. So there's no actual css output.
Alright so I figured it out. The problem is that I had to either include the foundation-everything mixin in my sass file or the specific modules I wanted.
just using #import 'foundation'; wasn't good enough, I had to also put #include foundation-everything; or list each component I wanted in case I didn't want everything.
I had similar issue even after adding
#include foundation-everything($flex: false);
I figured it out after updating my gulp-sass module.