I'm using the Quill WYSIWYG editor in a Vue project that I'm working on.
I've installed quill via npm install quill#1.3.6. Files are installed to node_modules/quill/.
When importing the JavaScript I do import Quill from 'quill' in the component that needs it, but in order to include the CSS I have a section in my Vue component like this:
<style scoped>
#import '../node_modules/quill/dist/quill.snow.css'
</style>
This works fine for me - but I'm not sure that this is the best way to include these files/if there is a better way. Is there a better way? I wasn't sure if accessing them through the node_modules directory is the "professional" way to do this or if there are any issues with this approach
This is the correct approach, however you can usually omit node_modules from the path because Webpack will search this path by default (unless you have configured it otherwise):
<style scoped>
#import 'quill/dist/quill.snow.css'
</style>
Alternatively you can import the CSS in JavaScript code like you would any other module:
<script>
import 'quill/dist/quill.snow.css'
</script>
If you import it this way, then you can be sure that the CSS will be bundled only once, whereas I don't think importing it in CSS will de-dupe the styles if you import it in multiple CSS files in your project (but in your use-case this may not be an issue).
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 a beginner at Reactjs, Javascript and is going trough some tutorial and notice
that for stylesheet some do like this in a React Component:
import '../../styles/video.scss
and some do like this in the index.html:
<link rel="stylesheet" href="./css/styles.css">
When to use what and what is preferred to use with ReactJs
import '../../styles/video.scss'
This is definitely the way to go.
The major difference is that things imported this way will be pulled through the webpack pipeline, such as loaders. The loader responsible for transpiling SASS looks for ES6 imports, and it cannot transpile links in the index. In simple words, you cannot import sass & friends as a link.
Another thing is that you keep tossing things into the index, it'll grow really quickly and get messy.
Besides, your case mentions only global css imports, and this is the only thing you can do via a link inside the index. Things like modular css are only available as module imports.
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 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?
I have seen multiple questions related to this one, but I still couldn't understand what's the correct way of adding static CSS.
Adding the static CSS to the "static" folder the correct way?
Some of the suggestion I found on the internet were:
Requiring the CSS on main.js
Adding the CSS to the static folder and using a link tag pointing to the file on the static directory
I would like to know which one is the most correct.
Thank you.
if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css. like this :
require('./assets/css/main.css');
Using sass, I import my app.scss file in the style tag of my main App.vue file
<style lang="scss">
#import './styles/app.scss';
</style>
Then import any other sass files in my app.scss file.