I tried basic primary color change in Spartacus 4.0.1 but it seems to be overwritten by the default styling. Followed the guide: https://sap.github.io/spartacus-docs/css-architecture/
Is there a work around for this or is it fixed in newer versions?
Here's my code
mystore/src/styles.scss:
$primary: green;
$font-weight-normal: 600;
$styleVersion: 4.0;
#import "~#spartacus/styles/index";
:root {
--cx-color-primary: green;
}
screenshot showing my style is being overwritten
I've had the same problem today. Have a look inside your angular.json file inside the root folder. There is a section that defines the styles that are loaded. For me this looked something like this:
"styles": [
"src/styles.scss"
"src/styles/spartacus/user.scss",
"src/styles/spartacus/organization.scss",
"src/styles/spartacus/checkout.scss",
"src/styles/spartacus/cart.scss",
],
I noticed that inside the user.scss and all other imports the standard #spartacus/styles library is imported at the top. So everything you do in your styles.scss is overwritten again by these imports.
My approach for now was to put the styles.scss at the end. So nothing is overwritten.
"styles": [
"src/styles/spartacus/user.scss",
"src/styles/spartacus/organization.scss",
"src/styles/spartacus/checkout.scss",
"src/styles/spartacus/cart.scss",
"src/styles.scss"
],
To me it seems like a bug that the order is like this. Might report it later.
The easiest and recommended way to override basic primary colors, as of version 4.0, is by changing the compiled values of the CSS variables. But change them inside a CSS body selector, instead of a :root selector.
Example of storefrontapp/src/styles.scss file:
$useLatestStyles: true;
#import '#spartacus/styles';
#import '#spartacus/styles/scss/theme/santorini';
body {
--cx-color-primary: #a7fff6;
--cx-color-seconday: #8aa39b;
--cx-color-text: #5c6f68;
--cx-color-background: #95d9c3;
--cx-color-dark: #a4f9c8;
}
Related
I have global sass being included in my project and i cant find an efficient way to add it to the project.
there seems to be 2 popular ways to add css in your project.
vite: {
plugins: [svgLoader()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "~/assets/styles/main.scss";
`,
},
},
},
using vite seems to work but it also seems to inject itself into every component i use, so when i generate my project, i can see my css is repeated multiple times, some files as much as 300 times. the issue is found here on vites side https://github.com/vitejs/vite/issues/4448
css: ["#/assets/styles/main.scss"],
the above option seems to not do it for every component, but normal scoped sass in .vue files doesnt pick up sass variables and mixins on compilation using this method
using additionalData adds it to every page. this item is only meant for mixns and vars, which dont translate into permanent css when built.
basically use only vars in mixins in additionalData then use your global.scss in in css
I'm writing a library to import into other projects, to share custom components and styles.
Problem is with font files, .woff/.ttf/etc.
//_fonts.scss
$woff_path: '~/woff';
$ttf_path: '~/ttf';
#font-face {
font-family: "MyOpensans";
src: url($woff_path + "opensans-regular-webfont.woff2") format("woff2");
src: url($woff_path + "opensans-regular-webfont.woff") format("woff");
src: url($woff_path + "OpenSans-Regular.ttf") format("font-type");
font-style: normal;
...
}
$testfont: "MyOpensans", wingdings;
When I use $testfont in my scss, the url uses relative path, which of course doesn't work when imported into other projects. So, my thought was just use base64:
src: url(data:application/x-font-woff;charset=utf-8;base64;XXXX);
Works fine if I run the .woff files through a base64 convertor, and paste into _fonts.scss. But, I'd like webpack to do it for me. I've tried both base64-inline-loader and url-loader. Neither have worked.
A bit more digging with url-loader. if I import "#/assets/woff/opensans-regular.webfont.woff2"; in my main.ts, I can see it does base64 it into a variable in the main source, but my _fonts.scss of course has no idea of this, and my _fonts.scss still has src as the relative path. It seems as though url-loader does nothing with url() inside scss.
Am I missing something? Is there a way I can get webpack to turn my url(file path) into url(data:xxx) for me? Or some other way to get custom fonts to work when compiled to a library?
You might want to look into using something like base64-inline-loader
As per the example on that page:
rules: [
{
test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: ['base64-inline-loader']
}
]
I'm trying to use Tailwindcss #apply directive in a <style> tag of a Nuxt.js Vue file. Everything works fine, but I keep getting some annoying red squiggly lines. Please, guys, I need help... Thank you!
Below is a screenshot and a snippet:
<style scoped>
.title {
#apply text-orient font-light block text-5xl pt-2;
}
.message {
#apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>
There is no built-in way to solve this within VS Code. The recommended way to solve this is by making use of the Stylelint extension to handle your CSS linting (& SCSS and/or Less, etc.). It's very powerful and likely will improve your stylesheets beyond removing these errors for you.
You need to add the styleint dependencies to your project. Run:
npm install --save-dev stylelint stylelint-config-standard
yarn add -D stylelint stylelint-config-standard
Create a stylelint.config.js in the root of your project. (same location where your package.json is stored)
Place this snippet into it:
module.exports = {
extends: ["stylelint-config-standard"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};
Install these extensions to your VS Code setup:
Stylelint
Tailwind CSS IntelliSense
Last but not least, adjust your local or global VS Code settings.json file to include:
"css.validate": false,
"less.validate": false,
"scss.validate": false,
This way you will have the native linting "disabled", but are still ensuring it is linted using the Tailwind IntelliSense plugin.
Disable Vetur's style validation
Such CSS warnings may originate from the Vetur extension, which may very well be the case if the warning's icon (as seen in VSCode's "Problems" pane) is a Vue logo.
By disabling Vetur's style validation, you may lose other benefits. Although, in the long-run, it's probably better to rely on a more full-featured validator/linter than this extension.
Go to the Vetur extension settings and uncheck the option for style validation.
--- or ---
Set the option per-project, in a .vscode/settings.json file in the project root, with the following:
"vetur.validation.style": false
Vetur warnings look something like:
I found another solution Usage of Tailwind with nuxt lead to weird #apply issue #300
Just add lang="postcss" to style tag and with this fix, I haven't any error.
<style lang="postcss" scoped>
.title {
#apply text-purple-600 font-bold;
}
</style>
i think you are using prettier and that plugin get error when you make #apply in one line so try this:
<style scoped>
.title {
#apply text-orient;
#apply font-light;
#apply block;
#apply text-5xl;
#apply pt-2;
}
.message {
#apply font-light;
#apply pb-4;
#apply text-orient;
#apply text-2xl;
#apply text-blue-bayoux;
}
</style>
2 Steps
Add the lines below into: .vscode > settings.json
"css.validate": false,
"less.validate": false,
"scss.validate": false,
Install StyleLint Extension
https://marketplace.visualstudio.com/items/shinnn.stylelint
Restart, it's done!
I had the same problem with Nuxt and the solution was to follow the steps in this blog, the TL:DR is:
Install the stylelint vscode extension
Add this configuration in your stylelint.config.js
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
],
},
],
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
},
In the vscode configuration uncheck the option css validate or add this to your vscode settings.json file "css.validate": false
with this steps all will work perfect.
Just in case, I had a problem with the prettier formatting too, and it was fixed with this option in my vscode settings.json file "vetur.format.defaultFormatter.html": "prettier",
Try adding the extension PostCSS Language Support; it adds support for modern and experimental CSS within Visual Studio Code.
I use VS Code and added the following to my settings:
"files.associations": {
"*.vue": "html"
}
Afterwards, the error was gone.
Im my webpack config I add a path
"mixins": path.resolve(
__dirname,
"resources/assets/sass/mixins/mixins.scss"
),
Which means in all my single file components I use
<style lang='scss' scoped>
#import '~variables';
This works fine but what I am finding is this file is used in 95% of components so the import really is unnecessary. I want these vars available everywhere.
How can I globally add my SASS to my single file components without the need for the import in every file?
Well, Load your common CSS from Webpack and make it available globally for all the component. Webpack configurations are as below.
sass-loader also supports a data option which allows you to share common variables among all processed files without having to explicit import them
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
`
}
}
}
};
In here, specifing the sass loader under the loaderOptions option. Just like that, all the code in those files will be available in the global scope. So from any component we can use it out of the box:
And now you can able to access the variable in your Vue SFC without importing it.
<style lang="scss">
.classroom {
/* No need to import, it just works \o/ */
background: $bg-classroom;
}
</style>
Reference Official Docs here
Hope this helps!
I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3.
So far my attempts go like this:
vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work)
vue add vuetify
it creates a plugin dir: src/plugins, where it stores vuetify.js
add a v-btn in the HelloWorld component just for knowing if the font had effect
Then I should be able to import ../stylus/main.styl, where I have:
#import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
#import '~vuetify/src/stylus/main'
I even tried with #import '~vuetify/src/stylus/main' , do I have to do also vue add additional stylus-loader dependencies or anything plus? Because that's exactly what it's NOT recommended on Vuetify's website.
Error log: no errors, I just keep seing Roboto font in my material buttons
Any remarks?
Other attempts:
I tried to follow the steps written by Jacob E. Dawson but I'm missing something super silly probably.
Edit:
the linked article from medium at the time didn't specify it was not scoped to a specific Vue version as of September 2019.
So I just took a quick and fresh glance back to this, at the end it was something silly, if a project is created with vue-cli 3 (either custom choices or default), then obviously in the component App.vue I had to take out font-family from the style section as it overwrites the CSS:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
EDIT:
It's possible that some styles are broken when importing styles from main.styl:
https://github.com/vuetifyjs/vuetify/issues/3583
Does everything load, do you get any errors?
It seems it should work, unless perhaps you have some typos somewhere, or incorrect paths?
For example stylus should be styles in your #require '~vuetify/src/stylus/main.styl'.
do I have to do also vue add stylus-loader?
It should already be added for you.
If you did not select specific CSS preprocessor (i.e. stylus) during vue-cli installation, then you need to add it manually
npm i -S stylus stylus-loader
module: {
rules: [
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
This is working for me using nuxt 2.15.8.
Add this to your nuxt.config.js
vuetify: {
treeShake: true,
defaultAssets: {
font: {
family: "Inter",
},
icons: "mdi",
},
}
If you need different font weights you might have to import them manually in you CSS or as a in your HTML