I am new to scss in Nuxtjs. I have added all the css to assets folder, and also modified nuxt.config.js as below.
assets/
sass/
project/
element/
_input.scss
_tables.scss
_model.scss
mixins/
_buttons.scss
_lables.scss
_navbar.scss
_table-row.scss
_cards.scss
_inputs.scss
_tables.scss
_pages.scss
_variables.scss
_mixins.scss
main.css
My main css file
#import "project/variables";
#import "project/mixins";
#import "project/element/input";
#import "project/element/tables";
#import "project/element/model";
#import "project/mixins/buttons";
#import "project/mixins/lables";
#import "project/mixins/navbar";
#import "project/mixins/table-row";
#import "project/cards";
#import "project/inputs";
#import "project/tables";
#import "project/pages";
My vue files:
I have done this to my nuxt.config.js.
styleResources: {
scss: [
__dirname + '/assets/sass/project.scss',
]
},
But I don't understand what is wrong with the scss. I get basic layouts but I cannot get partials on a page. Is there anything with the pages/components folder structure to load imports?
Related
I am creating a project using Reactjs as a frontend library and i am also using sass for styling .I have various sass files in my project .The two main files are styles.scss and color.scss.When i am trying to import color.scss in one of scss file i am facing this issue.I want to use color.scss in all my scss files
//style.scss
// vendors
#import "~bootstrap-scss/bootstrap.scss";
#import "vendors/font-awesome";
#import "vendors/themify";
#import "vendors/feather-icon";
#import "vendors/animate";
#import "vendors/owl.carousel.scss";
#import "vendors/slick.scss";
#import "vendors/slick-theme.scss";
#import "utils/helpers.scss";
//color
#import "./color.scss";
//base
#import "base/typography.scss";
#import "base/reset.scss";
// components
#import "components/buttons";
#import "components/tabs";
#import "components/msg";
#import "components/dropdown";
#import "components/chat-box";
#import "components/tootip";
#import "components/loader";
#import "components/switchery";
#import "components/collapse";
#import "components/call";
#import "components/call-list";
#import "components/according";
#import "components/tour";
//layout
#import "layout/grid.scss";
#import "layout/sidebar.scss";
#import "layout/content.scss";
#import "layout/dark.scss";
#import "layout/rtl.scss";
#import "layout/login";
#import "layout/forms.scss";
#import "layout/customizer.scss";
//pages
#import "pages/inner-pages";
#import "pages/landing";
#import "pages/inner-pages-responsive";
#import "pages/landing-responsive";
#import "pages/landing-page";
#import "pages/react_plugin";
// themes
#import "themes/admin.scss";
#import "themes/theme.scss";
#import "themes/responsive.scss";
// ReactToastify
#import "~react-toastify/dist/ReactToastify.css";
#import "~react-datepicker/dist/react-datepicker.css";
// ToolTip
#import "~react-tippy/dist/tippy.css";
// Image gallery
#import "~react-image-lightbox/style.css";
//color.scss
#import "utils/variables.scss";
#import "style";
#import "vendors/slick";
#import "vendors/slick-theme";
html {
&.style1 {
$primary-color :#3a62b8;
$primary-light: #f6f7fa;
$gray1 : #e4e7ef;
#import "style";
}
&.style2 {
$primary-color :#064c3c;
$primary-light: #f4faf9;
$gray1 : #e1f1ee;
#import "style";
}
&.style3 {
$primary-color :#9b4aff ;
$primary-light:#faf8fc;
$gray1: #f4effa;
#import "style";
}
&.style4 {
$primary-color :#00d3cb;
$primary-light:#ebfafa;
$gray1: #daf6f5;
#import "style";
}
&.style5 {
$primary-color :#ff5b92 ;
$primary-light:#f8f5f6;
$gray1 : #faebf0;
#import "style";
}
&.style6 {
$primary-color :#ff803c ;
$primary-light:#fff9f5;
$gray1 : #faeae0;
#import "style";
}
}
enter image description here
Well, I think the reason is really clear. Watch the second line of the color.scss. You can find that you are importing style.scss there. That might be the reason of the #import loop
When building my angular 12 solution for production, styles are not applied. Following online docs I have taken the following steps:
I have
"styles": [ "src/styles.scss" ]
in my angular.json file, and in styles.scss I import tailwind:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
In my tailwind.config.js I have:
module.export = {
purge: {
enabled: true,
content: ["./src/**/*.{html,ts}"]
},
...
}
but styles are still not applied. What else do I need to do to get styles to apply correctly?
What is the best way to override variables?
I found the following order works:
#import "bootstrap/_functions.scss";
$primary: red;
#import "bootstrap/_variables.scss";
#import "bootstrap/_mixins.scss";
But what if I want to use a variable from Bootstrap? For example:
#import "bootstrap/_functions.scss";
$primary: $red;
#import "bootstrap/_variables.scss";
#import "bootstrap/_mixins.scss";
This doesn't compile because the $red variable isn't defined.
I've tried this order:
#import "bootstrap/_functions.scss";
#import "bootstrap/_variables.scss";
#import "bootstrap/_mixins.scss";
$primary: $red;
Which works but only for some elements. For example bootstap/_variables.scss includes:
$link-color: $primary !default;
The $link-colour variable doesn't use the override and instead uses the default value.
Any ideas?
I normally use a structure like below, /src/scss/core is my custom sass directory:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
// 2. Include any default variable overrides here
#import "core/variables"; // Custom theme variables
#import "core/variables-bootstrap"; // Bootstrap variables overrides
// Mixins
#import "../../node_modules/bootstrap/scss/mixins";
#import "core/mixins.scss";
// Bootstrap core
#import "../../node_modules/bootstrap/scss/utilities";
#import "../../node_modules/bootstrap/scss/root";
#import "../../node_modules/bootstrap/scss/reboot";
#import "../../node_modules/bootstrap/scss/type";
#import "../../node_modules/bootstrap/scss/images";
#import "../../node_modules/bootstrap/scss/containers";
#import "../../node_modules/bootstrap/scss/grid";
#import "../../node_modules/bootstrap/scss/tables";
#import "../../node_modules/bootstrap/scss/forms";
#import "../../node_modules/bootstrap/scss/buttons";
#import "../../node_modules/bootstrap/scss/transitions";
#import "../../node_modules/bootstrap/scss/dropdown";
#import "../../node_modules/bootstrap/scss/button-group";
#import "../../node_modules/bootstrap/scss/nav";
#import "../../node_modules/bootstrap/scss/navbar";
#import "../../node_modules/bootstrap/scss/card";
#import "../../node_modules/bootstrap/scss/accordion";
#import "../../node_modules/bootstrap/scss/breadcrumb";
#import "../../node_modules/bootstrap/scss/pagination";
#import "../../node_modules/bootstrap/scss/badge";
#import "../../node_modules/bootstrap/scss/alert";
#import "../../node_modules/bootstrap/scss/progress";
#import "../../node_modules/bootstrap/scss/list-group";
#import "../../node_modules/bootstrap/scss/close";
#import "../../node_modules/bootstrap/scss/toasts";
#import "../../node_modules/bootstrap/scss/modal";
#import "../../node_modules/bootstrap/scss/tooltip";
#import "../../node_modules/bootstrap/scss/popover";
#import "../../node_modules/bootstrap/scss/carousel";
#import "../../node_modules/bootstrap/scss/spinners";
#import "../../node_modules/bootstrap/scss/offcanvas";
#import "../../node_modules/bootstrap/scss/placeholders";
// Helpers
#import "../../node_modules/bootstrap/scss/helpers";
// Utilities
#import "../../node_modules/bootstrap/scss/utilities/api";
This structure works for me with variable overrides/extending but like Zim said you'd need to override $link-hover-color too since it's default value is set before you defined your custom $primary colour (at least that's my understanding of the !default flag).
$primary: $red;
$link-color: $primary;
$link-hover-color: shift-color($link-color, $link-shade-percentage);
Bootstrap 5
I think you'd have to set any other vars that use $link-color (ie: $btn-link-color) and merge the new colors into the $theme-colors map...
#import "functions";
#import "variables";
#import "mixins";
$primary: $red;
$link-color: $primary;
$btn-link-color: $primary;
$theme-colors: map-merge(
$theme-colors,
(
"primary": $primary
)
);
#import "bootstrap";
Demo
I'm using Bulma.io in an Angular 8 project and I've install Bulma with this command: npm install bulma. After that I've included the styles in my angular.json file:
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
I can work with Bulma but I can't override the variables to change, for instance, the background color of a navbar.
Here's my scss file that overrides the background-color of a navbar:
#import 'horizontal-navbar.component.css';
#import 'initial-variables';
#import "functions";
#import "bulma";
$navbar-background-color: #fff;
What am I doing wrong?
Thanks in advance.
We can import this as we do it with node sass
First save the bulma package
npm install bulma --save
then go to the style.scss and give the below code
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Update Bulma's global variables
$family-sans-serif: 'Nunito', sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
$body-background-color: #fff;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
#import '~node_modules/bulma/sass/utilities/_all';
#import '~node_modules/bulma/sass/base/_all';
#import '~node_modules/bulma/sass/elements/button';
#import '~node_modules/bulma/sass/elements/container';
#import '~node_modules/bulma/sass/elements/title';
#import '~node_modules/bulma/sass/form/_all';
#import '~node_modules/bulma/sass/components/navbar';
#import '~node_modules/bulma/sass/layout/hero';
#import '~node_modules/bulma/sass/layout/section';
I took this example from https://bulma.io/documentation/customize/with-node-sass/
I am working with Bootstrap v4.1.3
When trying to edit an element with class "card", I realized there are some codes like _card.scss and _type.scss adding style to my elements, and I don't even know how Bootstrap is calling them.
I would like to disable these codes so I don't have to rewrite the style.
Thanks in advance!
If you don't want these styles to be in your bootstrap file then you can download their source code at https://getbootstrap.com/docs/4.1/getting-started/download/#source-files
to exclude these two files from the bootstrap.scss & re-compile them.
/*!
* Bootstrap v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
#import "functions";
#import "variables";
#import "mixins";
#import "root";
#import "reboot";
#import "type";
#import "images";
#import "code";
#import "grid";
#import "tables";
#import "forms";
#import "buttons";
#import "transitions";
#import "dropdown";
#import "button-group";
#import "input-group";
#import "custom-forms";
#import "nav";
#import "navbar";
#import "card";
#import "breadcrumb";
#import "pagination";
#import "badge";
#import "jumbotron";
#import "alert";
#import "progress";
#import "media";
#import "list-group";
#import "close";
#import "modal";
#import "tooltip";
#import "popover";
#import "carousel";
#import "utilities";
#import "print";