I am getting this unclear error from SCSS: Unexpected character '' (1:4)
Failed to compile
./components/layout/Layout.scss
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
while this is my SCSS File Layout.scss:
#import './sass-tools';
#import './normalize';
#import './custom-base';
.page-wrapper {
position: relative;
max-width: $page-max-width;
margin: 0 auto;
&.nobp {
max-width: none;
width: 1224px;
}
}
.page-content {
position: relative;
background-color: $white;
.nobp & {
width: 1024px;
}
}
This is my folder structure:
./components/layout/
∟ Layout.jsx
∟ Layout.scss
∟ Layout.test.js
∟ _fonts.scss
∟ _sass-tools.scss
∟ custom-base.scss
∟ normalize.scss
For me it is unclear what character '' (1:4) is ought to be. I believe my Webpack config is ok, I can post it if you want, but SCSS has worked so far (with other files) in my project.
I found the problem. The SASS compiler output is bullshit: This is what happened:
Layout.scss imports
custom-base.scss imports
fonts.scss
that includes .woff and .woff2 files. I think I still need to add a loader for those
Related
I'm having trouble with sass variables. The browser is telling me i am using invalid property values and i can see the code editor is not picking up the variables i am using because it's not colorizing them.
I have uninstalled and reinstalled sass and gulp-sass but that didn't fix the problem and i'm out of ideas. I'm sure it's something really simple.
Key Facts
I am on windows 10
I installed sass using npm install sass
i installed gulp-sass using npm install gulp-sass
I am successfully compiling the .scss file into the .css file
i am currently trying to create the variables in an .scss file
This is my .scss file
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: flx;
min-height: 100vh;
flex-direction: clm;
}
main {
flex: mpage;
}
.item-wrap{
justify-content: sb;
}
In order for Sass to read your variables, when you call them you have to hang the $ character in front of them, as you did when you declared them.
Example:
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: $flx;
min-height: 100vh;
flex-direction: $clm;
}
main {
flex: $mpage;
}
.item-wrap{
justify-content: $sb;
}
I have the following code...
#use "#material/top-app-bar/_variables.import" as mdc;
.color{
background-color: lightblue;
height: mdc.$row-height;
}
But when I run I get...
Error: Expected digit.
src/components/header/index.style.scss 4:17 root stylesheet
I am guessing I am importing the Sass file incorrectly. I have tried...
#use "#material/top-app-bar/variables";
.color{
background-color: lightblue;
height: variables.$row-height;
}
#use "#material/top-app-bar/mdc-top-app-bar";
.color{
background-color: lightblue;
height: $mdc-top-app-bar-row-height;
}
Etc... but nothing I try is working. How do I import the variable using sass?
Update
I noticed this further up
[!] (plugin postcss) Error: Expected digit.
src/components/header/index.style.scss 9:29 root stylesheet
Could this be a Rollup plugin issue?
Update 2
Looks like part of the problem was installing the node-sass package. Now I get...
[!] (plugin postcss) Error: Invalid CSS after "...ight: variables": expected expression (e.g. 1px, bold), was ".$row-height;"
When I run the following...
#use "#material/top-app-bar/variables" as variables;
.color{
background-color: lightblue;
height: variables.$row-height;
}
I also tried the simpler
// ./_variables.scss
$row-height: 64px !default;
#use "./variables";
.color{
background-color: lightblue;
height: variables.$row-height;
}
And I still get the same thing.
I had a similar issue using the sass color module.
I had to add the following to my rollup.config.js
import sassPlugin from 'rollup-plugin-sass'
import sass from 'sass'
sassPlugin({
runtime: sass,
// Other properties omitted for brevity.
})
I'm using a gulp-sass plugin and it gives errors like
"Error: no mixin named font-base"
"Error: Undefined variable: "$background-color"
Apart from that I get a long list of errors which annoys me… and it does not let me find an error which breaks compilation if it happens. Renamed mixins.scss to _mixins.scss but it does not help.
My mixins.scss
#mixin font-base ($size, $height) {
font-size: $size;
line-height: $height;
font-weight: 500;
color: $lavender;
font-family: $base-font-family;
}
My style.scss
#import "global/fonts";
#import "variables";
#import "mixins";
#import "global/scafolding";
Sorry - find a mistake in gulp's task, it was:
gulp.task("style", function() {
gulp.src("source/sass/**/*.scss")
.pipe(plumber())
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("source/css"))
.pipe(browserSync.stream());
});
then I changed gulp.src from "source/sass/**/*.scss" to "source/sass/style.scss" and now everything is fine))
I have been working on a project which involves a bit of Sass and breakpoint. I am using gulp to handle the workflow.
Things have been working fine until I got this compilation error which is hampering further flow. I am sharing the code as well as the error that I received on Gitbash.
_nav.scss
a{
color:$navForeground;
text-decoration:none;
text-align:center;
display:inline-block;
padding:10px;
font-size:1.5em
#include breakpoint(max-width $small){
font-size:1.2em;
span{
display:none;
}
}
}//a
This _nav.scss gets compiled into styles.css. Below is the error that I am getting in bash.
Compilation failed in 1 files.
[16:32:22] { [Error: error components/sass/style.scss (Line 25 of C:/Users/user/Desktop/responsive/components/sass/modules/_nav.scss: Invalid CSS after " font-size:1.5em": expected ";", was "#include breakp...")
Compilation failed in 1 files.
]
message: ' error components/sass/style.scss (Line 25 of C:/Users/user/Desktop/responsive/
components/sass/modules/_nav.scss: Invalid CSS after "\t\t\tfont-size:1.5em": expected ";", was "#include breakp...")\r\nCompilation failed in 1 files.\r\n',
fileName: 'C:\\Users\\user\\desktop\\responsive\\components\\sass\\style.scss',
showStack: false,
showProperties: true,
plugin: 'gulp-compass',
__safety: { toString: [Function: bound ] } }
Would be really appreciative if someone could help. Thank you in advance.
You forgot a semicolon after font-size: 1.5em:
font-size: 1.5em;
#include breakpoint(max-width $small) {
I have set up a webapp using Sass with Yeoman's angular fullstack generator. It seemed to be running fine, until I realised errors that were being output every time grunt tries to run a task. Here's the output:
/Users/rorysmith/.rvm/rubies/ruby-2.2.1/bin/scss --no-cache --update app.scss:app.css
error app.scss (Line 4: File to import not found or unreadable: ../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap.)
Process finished with exit code 1
It's referring to a line in the app.scss file:
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap'
I changed the directory to include ../ at the start, as this is where my bower_components live:
When commented out, it has an issue with a different line of the same file:
#import 'modal/modal.scss';
Here's the app.scss file in its entirety, it's just the stock one created by the generator:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap";
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap';
#import '../bower_components/font-awesome/fonts';
/**
* App-wide Styles
*/
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// Component styles are injected through grunt
// injector
#import 'account/login/login.scss';
#import 'admin/admin.scss';
#import 'create/create.scss';
#import 'main/main.scss';
#import 'modal/modal.scss';
// endinjector
Any idea what on earth is going on?
I was encountering the same problem, here's what "fixed" it for me...
In the Gruntfile, find the following:
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
Modify the following line to read:
filePath = filePath.replace('/client/components/', '../components/');
Now it should inject with the correct paths.
Caveat: I don't really know what I'm doing.