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
Related
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
The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?
Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.
This is the directory structure
I have used vue-cli v3.4 to setup the project.
I am using vanilla bootstrap and not the bootstrap-vue components.
Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.
In your style.scss import your custom.scss before you import bootstrap.scss.
Now in your main.js import #/assets/style.scss.
You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.
Create a file /css/bootstrap-custom.scss, with the following:
// your variable overrides
// modify theme colors map
$theme-colors: (
"primary":#42b883,
//...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);
// import to set changes
#import "~bootstrap/scss/bootstrap";
In the main script, import the added file instead of the current imported bootstrap css file:
// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '#/css/bootstrap-custom.scss';
Reference: Bootstrap, Variable defaults
Following this tutorial, I installed Bootstrap to my Angular project using the npm install bootstrap --save command (in the Terminal) and than imported [Bootstrap] to my global styles.css with #import '~bootstrap/dist/css/bootstrap.min.css';.
That messed up the styles I've already had though, so I decided I will only import it to the components where I'm really going to need it (i.e. only putting #import '~bootstrap/dist/css/bootstrap.min.css'; in the .component.css files of the said components.
After I did that, something weird happened. Bootstrap is deffinitely imported somehow, since I can for example use class="btn btn-default" for my buttons, but it doesn't affect typography. h1s are not affected and even the texts inside the affected buttons keep the default font.
What is causing this? How can I make the fonts be affected too?
BTW: Typography is well affected by Bootstrap when I import it globally as mentioned in the first paragraph.
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"
It's there a way to use Grunt for injecting a new line like #import "my-custom-reset-for-bootstrap.less" in the end of bootstrap.less. Or other ideea how can I inject my less file from outside of bootstrap package. I want to do this to keep in original state the bootstrap package.
Thank you!
If I were you I would leave the Bootstrap file as it is and import it into your custom style file instead. The main advantage of this solution is that you can use variables, mixins and actually everything from the original Bootstrap less file in your custom style definitions.
my-custom-reset-for-bootstrap
#import "bootstrap.less";
.my-custom-class {
color: #gray-light; //var from Bootstrap variable.less file
}
In this case you won't need to do anything after upgrading Bootstrap files to newer version.