I am making an emberjs addon and have decided to use scss for styling.
I want to know how can I facilitate my scss styles to the app using my addon if it is not using scss but is just relying in pure css
More detail:
I have tested style in dummy app inside addon, I was able to import my style in dummy app by including #import 'addon/styles/addon.scss'; in tests/dummy/app/styles/app.scss as suggested here
But if I was to include my addon's style in app not using scss, what would be the steps?
Related
Currently I'am using antd for it's components, to use them properly I need to import antd css.
When I add this line of code #import '~antd/dist/antd.css'; to my css file to make the antd's components work, it messes up my entire application css.
Is there anyway to fix this? Or Am I importing antd css incorrectly?
I have been learning CSS, SCSS, etc for a while and I like to use SCSS over regular CSS. BUT have just started to learn React and currently using styled-components.
Am I able to use SCSS and all the features e.g. variables, mixins within React web projects?
Or do I have to use a method of having an external compiled CSS file (from scss) and add it into the head of the HTML file?
I want the capability to overwrite react-bootstrap (Sass) in a Next.js app. I have this working fine in React apps, but I've been unsuccessful getting it to work in Next.js. I don't want it set globally, set in _app.js, because I need it at the component level. Ideally, I'd like do something like this inside the somename.module.scss file:
#import '~bootstrap/scss/bootstrap';
And then below that, define my classnames to extend bootstrap classes, like this:
.goright {
#extend .text-right;
}
And if this isn't possible, is there another approach to achieve the same outcome with the Next framework?
As I learned more about the purpose of css modules, I realized that I was going about this all wrong. Next supports CSS-in-JS (styled-jsx), which provides most of the kind of customization I need to do.
Most of the tutorials and articles are using approach to import tailwind dependencies in styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
And then write custom styles with #apply function in custom-components.css or some separate file in global level.
But what if I want to use #apply function with tailwind in my component scoped styles? Is that possible?
Currently either my f.x. custom-component.css is polluted with different component styles, or component html is polluted with many classes.
BR
I used #ngneat/tailwind to add tailwindcss to my angular project and I could use #apply in my scss file of component.
However, it seems like nesting is not working all the time for me and, most important, dark variants is not working as well (here is the explanation).
Tailwind's documentation about components is to avoid using custom classes and just keep tailwind classes in the html if it's complex and only used in one component.
I usually define global styles in index.css. What is the best practice to define global style? When should I put it in index.css vs App.css when I work on React app?
For a React app, the best practice is to put every component in its own directory containing its corresponding JS and CSS files. The App component is the topmost component in a React app for wrapping all components. There aren't any predefined rules for using App.css or index.css for global CSS.
Check out this article for React styling best practices: https://medium.com/the-non-traditional-developer/styling-best-practices-using-react-c37b96b8be9c
Relevant question: index.css vs. App.css in default app created by "create-react-app" -- what's the difference?