I'm using the vuetify webpack boilerplate (https://github.com/vuetifyjs/webpack) and I can't get the aliases in /build/webpack.base.conf.js to work for importing css (like import "~assets/css/mycss.css") even though it's working like a charm for js import (like import MyComponent from "components/MyComponent").
I tried several potential solutions I found, none seem to work...
Is this even possible?
Try to remove .css at the end.
Change
import "~assets/css/mycss.css"
to
import "~assets/css/mycss"
For more details, check this: https://github.com/webpack-contrib/sass-loader#imports
Related
I know I have to import React first in component files:
import React from 'react';
// other imports...
I've also heard that imports with styles and images should be imported last:
// other imports...
import * as Styles from './styles.css';
import exampleIcon from '../icons/example-icon.svg';
Why should I import icons, images and styles last? What about the order of other imports (components, utilities, constants, etc.) - is there a standard/documentation for imports order?
I don't have any standard doc for that, but there's easy way which makes you not to care about that anymore..
If you use Visual Code for developing, just install vsc-organize-imports extension for Visual Code.. It will help you to organize imports automatically by default options..
Good luck..
I think We don't have any standard for that, my standard is like this, and I have seen a lot of people import code in this order.
React and React Hooks
packages
components
styles
I'd like to use this calendar package in my react project: https://www.npmjs.com/package/#zach.codes/react-calendar.
It comes with a css import, without it, the app effectively doesn't work. If I import the suggested css file import "#zach.codes/react-calendar/dist/calendar-tailwind.css" the calendar package works well but it messes with the rest of my app's styling. If I import the "no-reset" version import "#zach.codes/react-calendar/dist/calendar-tailwind-no-reset.css", the rest of my app looks fine but it does make the calendar look funky, it mostly looks like it works but I'd have to add my own css to make up for some styling that's lost.
That said, it would be ideal if I didn't have to add any css. Is there a way to import a css file and have the css be isolated to just the react component that is in the same file?
This is a very specific question, but I am using the Chakra UI component library for React and I want to import my own custom css files, although it doesn't allow me to do this.
I don't know if this is a bug or if it is intended, but is there any way I can go around it?
Thanks.
Make sure that you import css files in right place. Try to import your css files into App.js or if be more specific into the file where you init ChakraProvider. This approach works fine for my project:
import { ChakraProvider } from '#chakra-ui/react';
import './yourCssFile.css';
You can extend or override a token in the default theme by importing the extendTheme function. You can override properties as well as add new ones.
But if you want to add an external CSS file, I've found out from reading the docs that in order to import other file types (.css, .woff or .svg) in your theme file, you'll need to move those imports out of the theme file.
Here my project
https://codesandbox.io/s/dreamy-booth-if8f5?file=/pages/index.js
When I create _app.js and place import after that the styles don't work as expected. Wondering why...
I have a Dashboard.tsx file and Dashboard.scss file (I'm using vscode)
I'm trying to import the scss file like so: Import * as style from './Dashboard.scss'
but it can't find the module,
I tried also import style from './Dashboard.scss'
same error,
even tried renaming to Dashboard.module.scss which eliminated the problem but react code won't compile.
Don't import it as named. simply use import "./Dashboard.scss"; and It should work.