Breakpoint-sass not loading in gulp setup, Susy is working fine - npm

Hi I'm trying to get breakpoint-sass working with susy in my Gulp set-up
I have ran npm install breakpoint-sass --save-dev and linked it to the top of my sass file with #import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (susy is working fine from #import "./node_modules/susy/sass/susy";)
my gulp sass task is this
gulp.task("styles", function() {
return gulp.src("scss/application.scss")
.pipe( bulkSass())
.pipe(maps.init())
.pipe(sass())
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets/breakpoint'],
}).on('error', sass.logError))
.pipe(maps.write('./'))
//.pipe(autoprefixer())
.pipe(gulp.dest('./build/css/'))
.pipe(reload({stream:true}))
});
and my scss partial
#import "./node_modules/breakpoint-sass/stylesheets/breakpoint";
#import "./node_modules/susy/sass/susy";
#main {
#include span(12);
background: $primary-color;
text-align: center;
h1 {
color: green;
height: 2em;
}
#include breakpoint(500px){
h1{
color: red;
}
}
}
the h1 tag is red at all screen widths and never green. I can't see why this is happening. I have used breakpoint before in a grunt project with ruby and had no issues.
Thanks

Your includePath for breakpoint is one level too deep, omit the trailing /breakpoint so that it looks like so:
includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets'],
Once the includePath is set there is no need to specify the full path in the #import because gulp already knows where to look. So you can reduce your #imports to:
#import "breakpoint";
#import "susy";
Its always a good point to look into the compiled css if things don't work as expected.

Thanks – just one small tweak to suggest for anyone who tried the good solution by #zisoft and couldn't get it to work, I used './node_modules/breakpoint-sass/stylesheets' with success, where without the ./ in front it would fail. Maybe obvious to some people, but wanted to make a note.

Related

Spartacus 4 - How to extend default Storefront theme?

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;
}

Vue does not compile .scss files with comment "//"

I'm quite new to vue.js and little bit stack.
In my .scss file I have commented line like:
// overflow: hidden;
But when I keep this line, I'm getting error:
Unknown word
and compiler highlighting this comment. I saw that it is related to webpack config, but I don't have webpack.config.js file, I have only vue.config.js file and not sure how to config it to work properly. This is my config file, which is including variables file to all styles.
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/_variables.scss";`
}
}
}
};
I have sass-loader package installed and it is working fine - issue only with comments in .scss file.
I also found https://github.com/webpack-contrib/sass-loader/issues/171 but they are talking about webpack.config.js which I don't have.
I had the same problem. Changing the vue.config.js file is bit complex.
But this problem was resolved when I used lang="scss" in app.js where all my css imports were present.
<style lang="scss">
...
#import './stylesheets/custom.scss';
...
</stlye>

Font awesome icons displayed as empty squares when font awesome is installed using NPM

I have installed font awesome using npm command npm i -D #fortawesome/fontawesome-free.
Then I try to import it in my scss file in 2 ways.
#import '#fortawesome/fontawesome-free/css/all';
or
#import '#fortawesome/fontawesome-free/scss/fontawesome.scss';
after this I'm only getting blank squares instead of my icons. I'm using font awesome in my scss files like
.radioStyle input[type=radio] + label:before {
content:"\f111";
font-family: "Font Awesome 5 Free";
color: $button-grey;
font-size: 24px;
padding-right: 8px;
vertical-align:middle; }
also I'm using it in my html and I tried also to replace class fa with fas or fab
and none of these is working. When I use CDN everything is working as expected.
any advice?
When this happens to me, it's because I forgot to load their JavaScript or put the font files somewhere that's accessible from the browser. Another common cause of this is the importing the font awesome core but not any styles such as solid.
SCSS/Font Docs:
https://fontawesome.com/how-to-use/on-the-web/using-with/sass#compile
Example Import
#import "variables";
#import "/node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
#import "/node_modules/#fortawesome/fontawesome-free/scss/solid";
JavaScript Docs:
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#next

Change default font in vuetify is not working (vue-cli 3) [Vuetify 1.X]

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

Correct #font-face paths with webpack for a package included with SASS?

I have a webpack project:
main.js
project.scss
In my project root I also have a custom NPM package called my-package. Im this are fonts and a SASS file which uses them:
my-package/fonts/font.woff
my-package/fonts/font.woff2
my-package/fonts.scss
In fonts.scss:
#font-face {
font-family: $myfont;
src:
url('./fonts/font.woff2') format('woff2'),
url('./fonts/font.woff') format('woff');
}
Ive tried importing fonts.scss into project.scss:
In project.scss
#include "./my-package/fonts.scss";
However the path to the fonts are wrong. As its just a SASS include the paths are taken relative to project.scss, so it would need to be this to work:
#font-face {
font-family: $myfont;
src:
url('./my-package/fonts/font.woff2') format('woff2'),
url('./my-package/fonts/font.woff') format('woff');
}
Can I make webpack import the SASS file so thats its variables etc are available, but also have it correct the paths to the font files? The custom module is my own so I can change the code for it but I don't want to change it to something nonsensical.
I had the same issue. What you could do is create a your-font.scss file to accompany your font and import the your-font.scss file once in a base file in your app and not import it in another .scss again. That way your URL will be correct.