I try to do something realy basic what is described in spartacus documentation https://sap.github.io/spartacus-docs/css-architecture/#skipping-specific-component-styles
At file src/styles.scss:
$styleVersion: 4.3;
$skipComponentStyles: (cx-mini-cart, cx-product-carousel, cx-searchbox);
#import '~#spartacus/styles/index';
But looks like $skipComponentStyles variable not works as expected, no changes at UI. Is this a bug of lattest release or do I miss something?
It was not working for me too before I changed the styles imports from angular.json to styles.scss.
Before:
"styles": [
"src/styles.scss",
"src/styles/spartacus/user.scss",
"src/styles/spartacus/storefinder.scss",
"src/styles/spartacus/product.scss",
"src/styles/spartacus/order.scss",
"src/styles/spartacus/checkout.scss",
"src/styles/spartacus/cart.scss"
],
After:
"styles": [
"src/styles.scss"
],
styles.scss
$skipComponentStyles: (cx-mini-cart);
#import '~#spartacus/styles/index';
#import "styles/spartacus/user";
#import "styles/spartacus/storefinder";
#import "styles/spartacus/product";
#import "styles/spartacus/order";
#import "styles/spartacus/checkout";
#import "styles/spartacus/cart";
#import 'styles/custom-styles';
Related
I tried to import styles into my vuejs file by doing this
<style scoped>
#import '../assets/front/css/bootstrap.min.css';
#import '../assets/front/css/all.min.css';
#import '../assets/front/css/slick.css';
#import '../assets/front/css/simple-line-icons.css';
#import '../assets/front/css/style.css';
</style>
But anytime i run npm run dev i get this error
WARN [vite:css] #charset must precede all other statements
The project is in Nuxt3 by the way.
Here is the link to Stackblitz
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;
}
I'm starting a new project using the Vue CLI, and this is my first time using it.
I'm using a CSS framework (Spectre), which I installed via NPM. I'm now trying to import only parts of it. I have found a way to get it to work, but it's quite cumbersome, and I'd like to find a better way using the includePaths option.
Basically, the whole thing can be summarized like this: I have a *.scss file that looks like this:
#import "./node_modules/spectre.css/src/accordions";
#import "./node_modules/spectre.css/src/avatars";
#import "./node_modules/spectre.css/src/badges";
#import "./node_modules/spectre.css/src/breadcrumbs";
...
and I obviously want to simplify it by removing the ./node_modules/spectre.css/src/ part from all the imports.
In vue.config.js, here's what I have:
module.exports = {
css: {
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }
But that doesn't work.
I've looked at the following questions:
How to #import external SCSS properly with webpack and Vue.js?
Webpack-simple + vue-cli with SASS - Can't compile?
Using sass-resources-loader with vue-cli v3.x
But couldn't find an answer, or couldn't figure it out.
The URL transform rules of Vue CLI projects allow using ~ as a path alias into the project's node_modules/, so you could do:
#import "~spectre.css/src/accordions";
#import "~spectre.css/src/avatars";
#import "~spectre.css/src/badges";
#import "~spectre.css/src/breadcrumbs";
No changes to your Vue config is needed.
I'm having an issue with path on windows.
On OSX it works just fine.
Here is my task:
gulp.task('build:less', function () {
return gulp.src('./src/less/style.less', {base: './src/less'})
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
}))
.pipe(rename(pkg.css))
.pipe(gulp.dest('./build/assets/'));
});
./src/less/style.css contents
#import "../../vendor/bootstrap/less/bootstrap";
#import "../../vendor/bootstrap/less/glyphicons";
#import "../../vendor/font-awesome/less/font-awesome";
#import "../../vendor/material-design-iconic-font/less/material-design-iconic-font";
#import "../../vendor/bootstrap-select/less/bootstrap-select";
#import "../../vendor/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox";
#import "variables";
#import "navbar";
Error message
C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0>call gulp build:less
[18:28:34] Using gulpfile C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\gulpfile.js
[18:28:34] Starting 'build:less'...
C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\node_modules\gulp-less\node_modules\accord\node_modules\when\lib\decorators\unhandledRejection.js:80
throw e;
^
Error: '../../vendor/bootstrap/less/bootstrap.less' wasn't found. Tried - C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\vendor\bootstrap\less\bootstrap.less ,C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\vendor\bootstrap\less\bootstrap.less,..\..\vendor\bootstrap\less\bootstrap.less in file C:\TeamCity\buildAgent\work\f6d8e60b97f3ac0\src\less\style.less line no. 1
My less organization right now is as follows:
styles/pages/page1/index.less
styles/pages/page1/tab1.less
...
styles/widgets/widget1.less
styles/widgets/widget2.less
...
styles/tools/partials.less
...
styles/app.less
The entirety of my app.less file are #import statements to bring all the other parts in.
#import "tools/partials";
#import "widgets/widget1";
#import "widgets/widget2";
#import "pages/page1/index";
#import "pages/page1/tab1";
//...
These statements are maintained manually, which sucks. Is there a better way?
I'm dreaming of something like this:
#import "tools/partials";
#import "widgets/*";
#import "pages/**/*";
Maybe some kind of script to handle this on the editor level (using WebStorm)? Or perhaps some kind of plugin for the less compiler itself?
Right now I'm serving less files from an express middleware in my app, but I can easily switch to grunt if there's a solution there.
Take a look at grunt-less-imports. It maintains an imports file based on your files (app.less in your case).
Here is how I use it in my recent project. I have a bunch of less files, like so:
And I use grunt-less-imports like so (gruntfile.js):
less_imports: {
options: {
banner: '// Compiled stylesheet'
},
styles: {
src: ['<%= config.app %>/assets/less/**/*.less', '!<%= config.app %>/assets/less/styles.less'],
dest: '<%= config.app %>/assets/less/styles.less'
}
},
This task make a styles.less with imports:
So you just add-delete your less files, and task do the job importing them. Is it what you looking for?
Update
If you need more structure in your imports file, you can get some. For example, i have two folders with less files, page-frame-blocks and popups and want them to be imported first:
less_imports: {
options: {
banner: '// Compiled stylesheet'
},
styles: {
src: [
'<%= config.app %>/assets/less/page-frame-blocks/*.less',
'<%= config.app %>/assets/less/popups/*.less',
'<%= config.app %>/assets/less/*.less',
'!<%= config.app %>/assets/less/styles.less'],
dest: '<%= config.app %>/assets/less/styles.less'
}
},
Now my imports file looks like this:
Want popups styles be imported first? Just move it to top in src section. You get the idea - you can explicitly say what folders you want and in what order using grunt globbing patterns.