I want to compile my scss that that an #import rule remains present at the head of the css file. I've tried using #at-root to write a string or #{"#import url(...)"} but these end up trying to be imported and compiled. I've been up and down the documentation https://sass-lang.com/documentation/syntax but can't figure out how to output a raw string to the root.
input
#import url(http://some-file.com/foo.css);
.myclass {
p { font-weight: bold; }
}
how do you output a raw strig to the document root of the compiled output?
desired output
#import url(http://some-file.com/foo.css);
.myclass p { font-weight: bold}
Related
So, I have scss file with global styles. This file seems like that:
#import "colors";
#import "border-radius";
#import "box-shadow";
#import "paddings";
#import "margins";
#import "fonts-famalies";
#import "font-sizes";
#import "transition-durations";
#import "global-path";
#import "mixins";
#import "mixins-properties";
#import "../design/animations/fade-animation";
::v-global(*), ::v-global(*::before), ::v-global(*::after) {
box-sizing: border-box;
outline-color: var(--color-outline__global);
transition: background-color 0.2s linear;
}
::v-global(html), ::v-global(body), ::v-global(#application) {
font-family: var(--font-famaly__comfortaa);
background-color: var(--color-background__global);
color: var(--color-font__content);
margin: 0;
font-size: 95%;
height: 100vh;
overflow-wrap: anywhere;
}
v:global(a) {
color: var(--color-font__link);
}
Styles imports using vue.config.js with this configuration:
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/styles/global/global.scss";
`
}
}
}
})
All good, but when I open developer console in chrome I see picture like that.
When I checked header tag in HTML I see a lot of same css imports. If I comment all css styles - header have a lot of styles still. What am I doing wrong? I think that problem in loader
If you're going to be adding a global import (for example for shared SCSS variables and mixins), don't put ANY global styles in that import.
scss-loader's additionalData modifies each scss file it loads with the given string template. As a result, you're putting an import with your global style definitions at the start of every component's style block.
To fix this, move all your v-global(html) styles and the animations to a different file, which you import once in your index.html or App.vue. Ensure that the file you want to automatically import in your components only contains code that does not generate any styles by themselves (so scss variables, mixins, functions, etc. are fine). It's common that you name this file 'variables.scss' or similar, so no style definitions accidentally end up in this file or its dependencies.
I don't really understand about #import and partial file
But I want to ask for a little understanding.
I have 2 files. file2.scss must use the variable from file1.scss.
File1.scss
/* file1.scss */
$color-1 : #7E3D97;
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
File2.scss
/* file2.scss */
#import 'file1'
div.content{
background-color : $color-1;
}
When I compile SCSS, It generates 2 files. Which is not what I want. I want it to be
/* file1.css */
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
AND
/* file2.css */
div.content{
background-color : #7E3D97;
}
Because if I want to create a file file3.css, file4.css. while there is already a file1.css style rule. I will see #font-face and div.test1 contain in file3.css, file4.css.
I don't want that. What should I do?
P.S. Sorry my english. If you edit my text to make it easy to read. I will be very grateful.
If SASS is generating the CSS it does it for every 'normal named' file.scss. To mark a file for SASS that it should not be used to generate a separate css file use an underscore _ as prefix, - i.e. _partial.scss. That files will only be used to be imported to the main scss file.
Now you can organize your project:
// POSSIBLE PROJECT STRUCURE
// variables to whole project
// --> variables only, no classes
_defaults.scss
// partial files
// --> use vairables from _default.scss
// --> or if you want/need to define variables here
// --> use variables with default-flag: '$variable: value !default'
// --> so they will/can be overwritten by same variable set BEFORE in _default.scss
_partial-structure.scss
_partial-element.scss
...
// bring them together in main file
styles.scss
#import 'defaults';
#import 'partial-structure';
#import 'partial-element';
...
I am using gulp-sass to compile SCSS, but received the following error message:
[19:51:38] 'sassTask' errored after 98 ms
[19:51:38] Error in plugin 'gulp-sass'
Message:
assets\scss\base\_typography.scss
Error: Undefined variable: "$color-grey-dark".
on line 6 of assets/scss/base/_typography.scss
from line 7 of assets/scss/main.scss
>> color: $color-grey-dark;
Here are my variables from scss/abstracts/_variables.scss
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;
Here's where I used the $color-grey-dark in scss/base/_typography.scss which generated the error message:
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/* font-size: 16px; */
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
box-sizing: border-box;
}
and here is my code from assets/scss/main.scss:
#import "abstracts/variables";
#import "abstracts/functions";
#import "abstracts/mixins";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "layout/header";
#import "pages/home";
I did put variables at the top of the list, since I read that the wrong order of your imports can create problems, but that didn't fix it.
How can I fix this error? Here is a link to the repo of the project in case that's helpful: https://github.com/chris-fretz/natours-project.
Seems to be a problem with your pathes ... ;-)
In your project on github you #import file _variables.scss from directory "abstracts/variables".
The file in that directory is empty!!!
The file _variables.scss with the variables you want to load is placed in assets directly. So you may try #import 'variables ... or just move the file with the variables to the right place.
Additional nice notice: in that situation it could be helpful to check the pathes for other files as well i.e. mixins, functions, ... ;-)
I installed zurb-foundation using npm and tries to import the .scss of the former to my App.scss file. I'm using the "live sass server" for the compilation of the .scss code to .css code. While the .css file gets created but it shows no code even though I imported the .scss from foundation to my App.scss
pic shows the .scss code on the left and corresponding .css code on the right
if you have three file:
SASS SYNTAX
first file:
SASS SYNTAX
// foundation/_code.sass
code
padding: .25em
line-height: 0
second file:
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
you can add your files with import like this.
note: the name of file have to have this syntax:
_{name of file}.sass
// app.sass
#import foundation/code, foundation/lists
SCSS SYNTAX
first file:
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
second file:
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
third file:
// style.scss
#import 'foundation/code', 'foundation/lists';
for more info study: sass docs #import
have you also tried #import '../node_modules/foundation-sites/scss/foundation.scss'?
But maybe you could just pick what you really need to use, for instance the breakpoint mixins for your scss, like:
#import "~foundation-sites/scss/util/util";
#import "~foundation-sites/scss/util/breakpoint";
otherwise the whole foundation code will be compiled to your css file, maybe you don't need everything.
You can also have a look at https://get.foundation/sites/docs/sass.html
I'm importing bootstrap files and rewriting the source variables, eg :
#import "./../../../../vendor/bootstrap/less/scaffolding.less";
#import "./../../../../vendor/bootstrap/less/type.less";
#import "./../../../../vendor/bootstrap/less/code.less";
#import "./../../../../vendor/bootstrap/less/grid.less";
#import "./../../../../vendor/bootstrap/less/tables.less";
#import "./../../../../vendor/bootstrap/less/forms.less";
#import "./../../../../vendor/bootstrap/less/buttons.less";
//etc ...
#font-size-base: 100%;
Then in my own variables.less I set something like that, a mixin for rem font sizing
.font-size(#sizeValue) {
#remValue: #sizeValue;
#pxValue: (#sizeValue * 10);
font-size: ~"#{pxValue}px";
font-size: ~"#{remValue}rem";
}
Now of course, I dont see how I can make that working, this is what I wanted, and it doesn't work (input not recognised) :
// In bootstrap import file, trying to overwrite their variable parameter with my mixin
#font-size-h2: .font-size(32);
Any way to do what I want ?