I was reading the source code of ant-design and noticed each component got a index.ts and index.less in the style folder. Why js is used here for managing dependencies? What's the difference if I just move it to the less file and use #import?
int ant design each component using less file as modular less component it means you less never applying for another components except in :global pseudoclass
have a look "react-app-rewire-less-modules"
Related
I am currently working on a Vue.js project where i use the Vue CLI 3 to build components in lib mode like this: vue-cli-service build --no-clean --target lib --name ComponentName.vue. The components can then be used any website if registered in a Vue instance.
However, the website contains it's own stylesheets and the component too. To develop and see the actual styles applied to component i have to pull in these (shared) styles in every component i develop. Therefore they are also in the compiled stylesheets after building the component using the command stated above (vue-cli-service build).
My question: Can i exclude the (shared) styles when building the component? I can't find anything about it in the docs (https://cli.vuejs.org/). If somebody could provide the answer or a (Webpack) workaround that would be much appreciated.
Many thanks in advance!
I am not sure if I understand you correctly but there is an option to have these styles inline in the components itself, which would be much easier for development.
https://cli.vuejs.org/guide/build-targets.html#app
dist/myLib.css:
Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js)
I'm refactoring some Angular (7) components, and I don't know if there is some optimal location to put common scss style to reference it in many components' styleUrls.
Before refactoring, the scss was all global, and had to be built in order to be used between the different apps. Now, most of the scss has been encapsulated, requiring as few global style as possible.
However, there are still some global scss that I could get ride of in the build since they affect a known number of components. In order to do that, I extracted the scss at the root of all those components, and refered it, just before each individual components scss, in the styleUrls. (using some structure tips from this article )
Here is what the import looks like for every components requiring controls.component.scss
styleUrls: ['../controls.component.scss', './autocomplete.component.scss']
The structure looks somewhat like this :
LibName1
src
assets_source
global_styles
_global-files.scss
main.scss
lib
controls
control1
control2
control2.component.html
control2.component.scss
control2.component.ts --> here is the styleUrls
...
controls.component.scss --> the file I'm using to store cross-components style, importing in styleUrls.
Up until this point, everything is working out fine. The problem arises when I want to use this same scss file (controls.component.scss) outside of this app. The more high-level structure of our project and libs look like this :
ProjectName
src
app
components
component1
component1.html
component1.scss
component1.ts --> Where I want to refer to the controls.component.scss in the styleUrls
component2
...
libs
LibName1 --> The LibName1 from the previous structure example
I would like to be able to use the styles in the file controls.component.scss inside different components without having to build the lib and referencing its css in the main Project. I'm open to moving this file somewhere else, and what I would like is not to have to manage super longue relative paths.
I want to know what are the best practices in this scenario.
To use global for your app just put everything into your style.scss it will affect whole application style
If you want to import scss file from the library simply do like this
#import "~bootstrap/scss/bootstrap";
#import "~toastr/toastr";
#import "~font-awesome/scss/font-awesome";
Simply use ~ to import the scss file from node_modules folder
I'm working on my first production-ready React application, and I'm using SASS as a pre-processor for my CSS. One huge benefit I find when styling my React components is being able to break my CSS into separate modules and import the specific modules needed into the corresponding React component.
The more my application grows, the harder it has become to quickly find and update the correct CSS I need while developing. Which leads to my question...
I'm thinking of implementing the following styling, and I'm not sure if it will have any effect on the performance of my app and components:
1 - Continue to separate all CSS into SASS modules
2 - Import all of those modules into a single app.scss file
3 - Import that single app.scss file into all of the components that need styling
This will let me browse a single place - app.scss - for the specific css module I need, and then quickly tell me where I need to go in my app directory to access that file. I see this being beneficial as I could write brief comments in the app.scss about each of the individual modules. That way as the app scales, I'll have documentation about what each css module accomplishes and what components those css modules correspond to.
Thus, my question is will this style of loading so many modules into a single css file and then loading that single css file into each component that needs styling slow down my app/component load time/performance?
Building a Vue app using #vue/cli 3. I am at a point where I need to integrate SCSS, haven't used SCSS with vue before so having some trouble.
My SCSS structure is pretty conventional:
_variables.scss containing all my variables
_layout.scss containing some layout related stuff
_componentX.scss styles for componentX
...
_componentN.scss styles for componentN
app.scss import everything
I want break this up by removing the component#.scss imports from app.scss and instead putting those styles in the component's (SFC) style tags.
When I try this however, the component throws errors for unrecognized variables (even though app.scss is imported in main.js)
The workaround would essentially be importing app.scss in every component. Is this the way to go? (seems strange) or am I doing something wrong?
I've installed materialize-css using npm.
https://materializecss.com/
How can I import individual components (like button, navbar) instead of the full build?
I'm using webpack as well.
I see files such as buttons.js, but I can't import them. Also obviously I want to set up minification for the components that I use.
The easiest way to get whatever component you want to include is to setup your build using SASS/SCSS. That way choosing which component you want is as simple as including an #import statement like:
#import "components/buttons";
#import "components/grid";
#import "components/datepicker";
But if you dont want to learn SCSS syntax, try this: http://materialize.khophi.co