Breakpoint does not output anything - breakpoint-sass

Having a very weird breakpoint problem.
Screen.scss contains the most basic breakpoint example:
#import "breakpoint";
$high-tide: 500px;
.johnny-utah {
color: blue;
#include breakpoint($high-tide) {
content: 'Whoa.';
}
}
This gets compiled to:
.johnny-utah {
color: blue;
}
Seems like breakpoint is not returning anything. It used to work before.
Compass 1.0.1, Breakpoint 2.5.0 and SASS 3.4.3 running on OS X.10.
My config.rb is nothing special:
# Require any additional compass plugins here.
require 'breakpoint'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
preferred_syntax = :scss

Never mind, this was my most stupid error ever!
This was an old project and I thought I was using Breakpoint back then, but no ... I used my own mixin called _breakpoint.scss which looked like this:
#mixin breakpoint($breakpoint) {
#if $breakpoint == tablet {
#media only screen and (min-width: 768px) { #content; }
}
#if $breakpoint == desktop {
#media only screen and (min-width: 1024px) { #content; }
}
#else if $breakpoint == big_desktop {
#media only screen and (min-width: 1280px) { #content; }
}
}
That's why nothing was outputted ..

Related

Overwrite sass variables defined on svelte npm package

How can I overwrite sass variables defined in a svelte package?
I've published an npm package built with sveltekit & sass.
In my main sass file I've defined some variables for components colours.
After importing the package in a demo project, I've tried to change those variables hoping imported component styles changed. However it seems like those variables are isolated and the components are built using orignal ones no matter if they're redefined on parent component.
In my sveltekit package:
styles.scss
$primary: #14cabf !default;
Button.svelte
<style type="text/scss">
button {
background-color: $primary;
}
</style>
svelte.config.js
const config = {
preprocess: preprocess({
scss: {
prependData: `#import './src/lib/style/style.scss';`
}
}),
kit: {
adapter: adapter(),
vite: {
resolve: {
alias: {
$components: path.resolve('./src/components')
}
}
}
}
};
export default config;
In a demo project importing my package
style.scss
$primary: green; //this variable works and can be used but won't change button's background colour
Is there a way to export/process/redefine $primary and change that way button's colour?
Thanks for your time!

Using #use "sass:math" in a Vue component

In a Nuxt project i have created a button component with the following style:
<style lang="scss">
.my-button {
// lots of cool styles and stuff here
$height: 28px;
height: $height;
border-radius: $height / 2;
}
</style>
The problem is the border-radius: $height / 2; line gives this warning:
╷
182 │ border-radius: $height / 2;
│ ^^^^^^^^^^^
╵
components/MyButton.vue 182:20 button-size()
components/MyButton.vue 186:5 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass
2.0.0.
Recommendation: math.div($height, 2)
It also links to this page describing the deprecation.
However if i add #use "sass:math" to the top of my style tag like so:
<style lang="scss">
#use "sass:math";
//Cool styles and stuff
$height: 28px;
height: $height;
border-radius: math.div($height, 2);
</style>
I get this error:
[Vue warn]: Error in render: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 12:13:59
SassError: #use rules must be written before any other rules.
╷
102 │ #use "sass:math";
│ ^^^^^^^^^^^^^^^^
╵
components/MyButton.vue 102:1 root stylesheet"
I think i need to add the import of #use "sass:math" somewhere in nuxt.config.js file to load it in all components or similar, but i am not able to figure out where.
The css related blocks in my nuxt.config.js currently looks like:
build: {
postcss: {
plugins: {
'postcss-easing-gradients': {},
},
},
},
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
},
css: [
'~/assets/base.scss',
'~/assets/reset.scss',
],
Updating #nuxtjs/style-resources to above version 1.1 and using hoistUseStatements fixed it.
I changed the styleResources object in nuxt.config.js to:
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
hoistUseStatements: true,
},
and added #use "sass:math"; to the top of global-inject.scss.
Updated answer
What if you try this in your nuxt.config.js file?
{
build: {
loaders: {
scss: {
additionalData: `
#use "#/styles/colors.scss" as *;
#use "#/styles/overrides.scss" as *;
`,
},
},
...
}
Or you can maybe try one of the numerous solutions here: https://github.com/nuxt-community/style-resources-module/issues/143
Plenty of people do have this issue but I don't really have a project under my belt to see what is buggy. Playing with versions and adding some config to the nuxt config is probably the way to fix it yeah.
Also, if it's a warning it's not blocking so far or does it break your app somehow?
Old answer
My answer here can probably help you: https://stackoverflow.com/a/68648204/8816585
It is a matter of upgrading to the latest version and to fix those warnings.

Setting global sass variables in a vue project

I created a vue.config.js file to set some global sass variables (just like the documentation specifies), however when trying to access the variables in a component, I get an undefined error. Adding the same import statement manually in the component works, but somehow it's not being picked up from inside the vue.config.js file. I checked that I have node-sass and sass-loader installed and that the vue.config.js is in the project root (next to the package.json). What am I missing?
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/styles/_variables.scss";
`
}
}
}
}
Change data to prependData
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "#/assets/styles/_variables.scss";
`
}
}
}
}
You can read more about this here: pre-loader docs
this code is for vue3
install:
Sass
npm install -D sass-loader#^10 sass
fibers
npm install -D fibers
Style Resources Loader
npm i style-resources-loader -D
in your vue.config.js (root level project)
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/assets/styles/scss/_variables.scss";
`
}
}
}
}enter image description here
symbol # means that your file start from src folder
npm install --save-dev node-sass sass-loader
Create file 'vue.config.js' in the root
Add code below. Remember - # refers to /src folder
module.exports = {
css: {
loaderOptions: {
sass: {
data: '#import "#/assets/css/variables/_colors.scss";'
}
}
}
}
Restart the project
It's hard to troubleshoot without the full context, so here are several options you can try:
Ensure you've restarted the dev environment since changing the config (re-run yarn dev or npm run dev)
Keep the template literal to one line, as is used in docs. This shouldn't make a difference, but it might. (e.g. data: `#import "#/assets/styles/_variables.scss";`)
As you probably know, the underscore in front of a sass file denotes a sass partial. A partial is not used in the example, so it is possible that this has an effect as well. (e.g. rename _variables.scss to variables.scss and use data: `#import "#/assets/styles/variables.scss";`)
Ensure that the sass-loader, node-sass, and css-loader packages are up to date.
Try using the path without the slash after the #. e.g. #assets/styles/_variables.scss.
Try with a ~ instead of the #. e.g. ~assets/styles/_variables.scss. If nothing else has worked, try replacing the # with src as well.
Good luck!

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

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.

_Class.scss: Undefined variable "$font-family" in Sencha Touch theme

I am trying to add a new customized theme to my app, but it is raising the following error when I am compiling on Compass:
_Class.scss: Undefined variable: "$font-family"
I tried to change the html,body font in _Class.scss to $font-family, but it doesn't work. My Sencha Touch version is 2.2.1. How can I solve this issue?
// Let's start with the basics
$base - color: #CC0000;
$active - color: #850000;
// Buttons
$button-gradient: 'bevel';
// Lists
$list-bg-color: # eee;
$list - color: #333;
$list-pressed-color: # ddd;
$list - active - gradient: 'recessed';
$list - header - bg - color: #990000;
$list-header:white;
$list-header-gradient: 'bevel';
// Tabs
$tabs_dark_color: #000;
#import 'sencha-touch/default/all';
#include sencha-panel;
#include sencha-buttons;
#include sencha-sheet;
#include sencha-picker;
#include sencha-msgbox;
#include sencha-loading-spinner;
#include sencha-button-ui('action', #ffc801);
#include sencha-button-ui('decline', desaturate(darken(#b8a7a7, 10%), 5%));
.x-tabbar-dark .x-tab {
color: white;
}
.x-list-header {
color: white !important;
}
.x-list-round .x-list-header {
color: #777 !important;
}
.x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon {
background: white !important;
}
This is a rather old post but for the sake of completeness. I ran into this issue yesterday. It occurs because you did not import the default theme variables.
You did import
sencha-touch/default/all but these are not the variables. The variable reside in sencha-touch/default
#import 'sencha-touch/default'; should resolve the issue.
create folder named stylesheets where you placed config.rb
I have created folder styles where I placed config.rb file
copy folder fonts from touch\resources\themes\fonts to styles/stylesheets/ folder