I'm getting this error:
Error: The target selector was not found.
Use "#extend .animate--fade-in !optional" to avoid this error.
╷
276 │ #extend .animate--fade-in;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
from the following snippet:
.animate--fade-in {
opacity: 0;
animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
#mixin animate($type: 'fade-in', $time: 1s, $delay: 0s) {
#if $type == 'fade-in' {
#extend .animate--fade-in;
animation-duration: $time;
animation-delay: $delay;
}
This worked fine in Ruby Sass, but broke after upgrade to Dart Sass. I cannot understand why it cannot see the selector that is right there with exactly same name. Nothing in the docs hints at what the issue is.
Tried turning .animate--fade-inv into a placeholder #animate--fade-in - no change.
Related
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 want to, in Dart project, use Sass (for some nesting and file concatenation) and then apply autoprefixer to the result CSS.
In pubspec.yaml I do have those dependencies and transformers. TL;DR I am trying to use sass_builder (which works just fine on it's own; https://pub.dartlang.org/packages/sass_builder) and postcss_transformer (https://pub.dartlang.org/packages/postcss_transformer):
dependencies:
dev_dependencies:
browser: '>=0.10.0 <0.11.0'
dart_to_js_script_rewriter: '^1.0.1'
postcss_transformer: '^0.1.1'
sass_builder: '^1.1.2'
transformers:
- dart_to_js_script_rewriter
- sass_builder
- postcss_transformer:
arguments:
- use: autoprefixer
- autoprefixer.browsers: '> 1%'
However even if the usage of the transformers is, at least I believe, good, it just cannot cooperate OK:
"C:\Program Files\Dart\dart-sdk\bin\pub.bat" serve web --port=62806
Loading source assets...
Loading dart_to_js_script_rewriter, sass_builder and postcss_transformer transformers...
Serving klubFITpp_titani web on http://localhost:62806
[web] GET Served 4 assets.
[Info from Dart2JS]:
Compiling klubFITpp_titani|web/main.dart...
Build error:
Transform Postcss on klubFITpp_titani|web/style/alfa.css threw error: Systém nemůže nalézt uvedený soubor.
Command: postcss --use autoprefixer --autoprefixer.browsers "> 1%"
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
dart:async/zone.dart 1307 _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330 _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257 _BufferingStreamSubscription._add
dart:async/stream_controller.dart 796 _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 667 _StreamController._add
dart:async/stream_controller.dart 613 _StreamController.add
dart:isolate-patch/isolate_patch.dart 151 _RawReceivePortImpl._handleMessage
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
[web] GET style/alfa.css => Could not find asset klubFITpp_titani|web/style/alfa.css.
[Info from Dart2JS]:
Took 0:00:04.000418 to compile klubFITpp_titani|web/main.dart.
Build completed with 1 errors.
I am seeking for the solution on how to connect those two transformers or what to use to run Autoprefixer properly. I am also fine with instaling postcss etc. using node, which I now for the postcss_transformer transformer. It would be best if it would work using pub build / pub watch, eg. using some Dart transformer or so.
I use Windows 10. postcss works ok in a command line.
So I got this to work, but I'm not sure what exactly in your configuration isn't working. What I had to get this to work:
a) postcss command needs to work along with having the autoprefixer. I used this command to install:
npm install -g postcss-cli autoprefixer
b) Then I tested the on the command line to ensure it worked.
I used your pubspec.yaml exactly.
The web/index.scss I used was:
$primary-color: #333;
body {
color: $primary-color;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
The output was:
body {
color: #333;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: linear-gradient(to bottom, white, black);
}
/*# sourceMappingURL=*/
This was on a mac. So the configuration is possible. Hopefully this helps some.
Just a note that in the new build_runner system this won't work as is as it overwrites a file which is not allowed in the new system. One could fix this by specifying different output extensions instead of using the same input extension.
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.
I'm having trouble with codekit, the code below is correct and should work with sass 3.4.5 (selective steve) which is running with my codekit 2.1.6 - ive tested the code with sassMeister and have provided a link. Has anyone got an idea what is going on?
Codekit was setup as a compass project using the latest compass.
Codekit gives me:
Compass was unable to compile one or more files in the project:
error style.scss (Line 3 of _nav.scss: Invalid CSS after " &": expected "{", was "__list {"
"__list" may only be used at the beginning of a compound selector.)
identical style.css
http://sassmeister.com/gist/f07191a09789e354bae6
nav[role=navigation] {color: black;}
.nav {
&__list {
color: black;
&__item {
color: black;
}
}
&__link {
color: black;
&--active {
color: black;
}
}
}
should convert to
nav[role=navigation] {
color: black;
}
.nav__list {
color: black;
}
.nav__list__item {
color: black;
}
.nav__link {
color: black;
}
.nav__link--active {
color: black;
}
EDIT
if I go about in codekit its using SASS 3.4.5 and Compass 0.12.7 (which is the current) - ill try to installl a later version of compass
IF I RUN COMPASS WATCH ON THE DIRECTORY IT WORKS but Codekit doesnt..
EDIT
Codekit seems to be using an older version of Compass - even if I point it to my locally installed version.
EDIT
I believe that the version of compass codekit is using on my system is too old - 0.12.7 where it needs to run 1.0.1 - but I cant find out how to get it to switch
Codekit didnt seem to pick up the correct version of compass - no documentation, so I moved back to the terminal.