Breakpoint mixin compilation error - sass

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) {

Related

Why is node-sass throwing "Invalid CSS after \" #include corners\": expected \"}\", was \".rounded;\""

Per the example provided here I created a project with the following files...
// _corners.scss
$-radius: 3px;
#mixin rounded {
border-radius: $-radius;
}
// style.scss
#use "./corners";
.button {
#include corners.rounded;
}
but when I run this with node-sass like...
./node_modules/.bin/node-sass src/components/test/style.scss dist/output.css --include-path node_modules
I get...
{
"status": 1,
"file": "/.../web/ui/src/components/test/style.scss",
"line": 4,
"column": 12,
"message": "Invalid CSS after \" #include corners\": expected \"}\", was \".rounded;\"",
"formatted": "Error: Invalid CSS after \" #include corners\": expected \"}\", was \".rounded;\"\n on line 4 of src/components/test/style.scss\n>> #include corners.rounded;\n\n -----------^\n"
}
What am I missing? I tried sass version too but neither are working
Node-sass, which is libsas based, doesn't currently support the #use syntax, only dart-sass does https://sass-lang.com/documentation/at-rules/use

Why am I getting "Expected digit" when trying to import a Sass variable from Material using Rollup and PostCSS?

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.
})

Unclear SCSS error Unexpected character '' (1:4)

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

How do i include the env() method inside of a min or max function in SCSS?

I have a styles.scss file.
In it, i have the following definition which fails to compile down to css:
.modal-dialog {
margin-top: max(6%, env(safe-area-inset-top));
}
I get the following error:
"env(safe-area-inset-top)" is not a number for "max"
How do i write this correctly?
.modal-dialog {
margin-top: unquote('max(6%, env(safe-area-inset-top))');
}
What about calc(max(6%, env(safe-area-inset-top)))?

How can I get valid css from sass-loader with current webpack configuration?

I am about to create a pattern library for my company. I am using the following software:
css-loader#0.23.1
extract-text-webpack-plugin#1.0.1
node-sass#3.8.0
sass-loader#4.0.0
style-loader#0.13.1
webpack#1.13.2
resolve-url-loader#1.6.0
node#6.3.1
npm#3.10.3
on my computer (Windows 10).
My goal is to use the #import "colors" statement and to get corresponding file ../patterns/globals/_colors.css. I tried the includePaths configuration of the sass-loader and the resolve-url-loader with the property root. But neither is working so far...
In my first run with sass-loader and includePaths I got the following error report:
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.2
Time: 522ms
+ 1 hidden modules
ERROR in ./styles.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/app
at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/Compilation.js:229:38
at onDoneResolving (~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:85:20
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:726:13
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:52:16
at done (~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:241:17)
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:44:16
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:723:17
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:167:37
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
at onResolved (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:127:10
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:191:15
at applyPluginsParallelBailResult.createInnerCallback.log (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:110:4)
at loggingCallbackWrapper (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
at ~/projects/webpack-sass-fail/app/node_modules/tapable/lib/Tapable.js:134:6
at Tapable.<anonymous> (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/DirectoryDescriptionFilePlugin.js:24:12)
at Storage.finished (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at ReadFileContext.callback (~/projects/webpack-sass-fail/app/node_modules/graceful-fs/graceful-fs.js:78:16)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
Child extract-text-webpack-plugin:
+ 2 hidden modules
ERROR in ./~/css-loader!./styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~\projects\webpack-sass-fail\app
# ./~/css-loader!./styles.scss 3:10-66
ERROR in ./~/css-loader!./styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./typography in ~\projects\webpack-sass-fail\app
# ./~/css-loader!./styles.scss 4:10-70
After my second run with resolve-url-loader I got another error report:
Hash: 0f2ad6d2bedd426d776a
Version: webpack 1.13.2
Time: 605ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] app
[0] ./client.js 27 bytes {0} [built]
+ 1 hidden modules
ERROR in ./styles.scss
Module build failed: ModuleBuildError: Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
at DependenciesBlock.onModuleBuildFailed (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at ~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at Object.<anonymous> (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:32:18)
at ~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:211:3
at runMicrotasksCallback (internal/process/next_tick.js:58:5)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
Child extract-text-webpack-plugin:
+ 4 hidden modules
ERROR in ./~/css-loader!../patterns/globals/colors.scss
Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
# ./~/css-loader!./styles.scss 3:10-89
ERROR in ./~/css-loader!../patterns/globals/typography.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/patterns/globals
# ./~/css-loader!../patterns/globals/typography.scss 3:10-76
I I try to compile a simle sass with the following content:
$grey: lightgrey;
$family: "Tahoma";
body {
font-size: 12px;
}
p {
border: 1px solid $grey;
font-family: $family;
}
with the mentioned webpack configuration I receive no error message but invalid CSS code like this one:
$family: "Tahoma";
$grey: lightgrey;
body {
font-size: 12px;
}
p {
border: 1px solid $grey;
font-family: $family;
}
I don't understand where is the source for my fail.
Best regards,
JBrieske
Edit: With the help from #IRus I managed to solve my problem.
Module build failed: ModuleNotFoundError: Module not found: Error:
Cannot resolve 'file' or 'directory' ./colors in
~/projects/webpack-sass-fail/app
Rename color to color.scss in typography.scss. Or setup resolve in webpack config properly.
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
Change loader in ExtractTextPlugin this way:
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!resolve-url!sass')}
// or
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', ['css', 'resolve-url', 'sass']) }
Because this is equivalent:
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css')}
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'resolve-url', 'sass')}
Than you get new error:
Undefined variable: "$grey".
This is just misspelling in styles.scss:
// border: 1px solid $grey;
border: 1px solid $gray;

Resources