I import a css file with a font-face declared in it with a relative URL.
#import '~materialize-css/dist/css/materialize.min';
.register-container {
#extend .row;
}
I use the raw-loader!sass-loader chain because it's an angular component style.
{
test: /\.scss$/,
include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
loader: 'raw!sass'
},
When I do that the content of the materialize file is being copied. And when I load the page it tries to load the fonts from a wrong directory because the relative path is wrong.
The fonts work because I load them with different loaders chain in a different file. The chain is: css!resolve-url!sass?sourceMap
So the fonts are there but the issue is that the content of the css is copied twice and it loads the fonts multiple times from a front path
Can I do something about it? So that the sass loader will know not to copy the css content?
Might Help?
$font-url: unquote("somefile.css");
#if variable-exists(font-url) {
#import url($font-url);
} #else {
#error "sorry no dice";
}
String Functions
unquote($string)
Removes quotes from a string.
- (Sass::Script::Value::String) unquote($string)
Removes quotes from a string. If the string is already unquoted, this will return it unmodified.
Examples:
unquote("foo") => foo
unquote(foo) => foo
Related
I have a main.scss file that I want to import colors into from a _colors file.
I have defined a body color in the color file, when I try to import it, I see no changes in the webpage. They are both in the same scss folder but neither #include or #import seem to make a difference. I have tried with and without the underscore in my import statement, both single and double quotes and both import and include keywords. Please tell me what stupid mistake I am making that will rectify this problem as I have researched the problem and think I have been able to copy the examples with no success.
_colors.scss
body {
$background-color: maroon;
}
main.scss
#include 'colors';
Partials are used with #use directive. Then,
_colours.scss
body{
background-color: maroon;
}
style.scss
#use "_colours";
The reuse of code is done through the #mixin directive.
_colours.scss
#mixin body--background{
background-color:maroon;
}
style.scss
#use "_colours.scss" as so;
body{
#include so.body--background;
}
But, if you want to just define just colours use variables instead. Example below,
_colours.scss
$maroon=maroon;
$lightblue=//et cetera.
style.scss
#use "_colours";
body{
background-color:$maroon;
}
If you have a main.scss file which will be the file that gets compiled, and you want to import variables, mixins etc from another partial file, such as _colors.scss. You could do so by loading the members from the partial _colors.scss into main.scss with a #use at-rule. This allows loaded members from the module to be referenced with dot-notation throughout your main.scss stylesheet.
Let's say your _colors.scss file looked like this:
$bodyColor: maroon;
$someOtherColor: #f06;
/* adding a mixin for demo */
#mixin highlight($c, $bg) {
color: $c;
background: $bg;
}
/* some extra styles pertaining to _color.scss */
.some-styles {
color: $someOtherColor;
}
Note: The syntax for #use is #use <url> as <namespace>;.
You could load the variables/mixins etc into main.scss with a #use rule and reference the namespace throughout your program:
#use "./colors" as c;
body {
background-color: c.$bodyColor;
}
.highlighted {
#include c.highlight(#fff, #f06);
}
or without defining a namespace like:
#use "./colors" as *;
body {
background-color: $bodyColor;
}
.highlighted {
#include highlight(#fff, #f06);
}
You certainly can include a body {} declaration inside _colors.scss and load it the same way as discussed above, but I think your wanting to place the body style block inside main.scss and simply reference loaded variables from _color.scss. If you have a directory of many partials and want to load them into main.scss without writing separate #use rules for each load, then introduce a index file with #forward rules to load an entiry directory of partials into main.scss using a single #use rule.
I would like to globally append a specific selector to all CSS selector used in my application.
I'm using React and those Webpack loaders post-css, css-loader, sass-loader and extract-text-webpack-plugin.
I don't want to edit all my classname within jsx files. I just want to append this specific selector at build time.
Is there a loader to achieve this? Or any other solution...
What I actually have:
.myClass {
...
&--blue { ... }
}
What I want after Webpack transpilation:
.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }
Thanks
Gautier
PS: The reason I need this feature is to avoid CSS selector collision with the Website I'm integrating my application. I don't wan't to manually edit all my scss files to append the selector.
this should be solvable by in you main sass file:
.specificClass {
#import 'variables';
#import 'fonts';
// ... do more imports
}
I'm writing my own static site generator in ruby and I'm in the process of adding Sass compiler to my code.
def compile_sass
# system 'sass _sass/styles.scss styles.css'
options = {
syntax: :scss,
style: :compressed
}
render = Sass::Engine.new(File.read('_sass/styles.scss'), options).render
File.write('style.css', render)
end
But problem occurs when the styles.scss file has #import in it. Causing
(sass):1: File to import not found or unreadable: variables. (Sass::SyntaxError)
Both SCSS files are located in _sass folder, main script in root, and compile_sass is located in _generator. But when I uncomment the system call and comment the rest, everything works as expected.
styles.scss
#import 'variables';
html {
background-color: red;
}
_variables.scss
body {
background-color: blue;
}
I tried almost everything, checked how to import stuff, looked at the documentation, but I can't find anything that would helped me find and define the problem.
Turns out I had to load all _sass/*.scss files into Sass::Engine like this:
Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
load_paths << '_sass'
end
I can't understand why I cannot change picture (background of field and image of imageview) from this method:
private void loginCheck(String loginText){
String login = loginText.trim();
if(login == null || login.equals("")) {
loginField.setStyle("-fx-background-image:url('images/registration_login_wrong.png');");
logoTick.setStyle("-fx-image:url('images/registration_wrong.png');");
logoTick.setVisible(true);
}else{
loginField.setStyle("-fx-background-image:url('images/registration_login_right.png');");
logoTick.setVisible(false);
}
}
CSS code for logoTick is:
.login_tick{
-fx-image:url("images/registration_tick.png");
visibility:false;}
Everything besides -fx-image and -fx-background-image seems to work fine. I also changed background image in another class(of a label) and didn't encounter any problems. That's why I can't understand what can be possibly wrong. I checked images location and name everything seems correct. If I manually replace the image path in CSS it is working, but from the code images just disappear.
The paths in the CSS url(...) function are treated as relative paths; the location to which they are relative is different in a stylesheet and in an inline style. From the CSS documentation:
If the style appears in a stylesheet, the path is relative to the base
URI of the stylesheet. If the style appears in an inline style, the
path is relative to the root of the classpath.
Without knowing your project layout, it's not possible to give you the correct paths for the images, but that should be enough to figure it out.
Alternative Solution
An alternative solution is to define all the styles in CSS, and to manipulate the style class in the Java code to select the appropriate style. I like to use JavaFX 8 CSS PseudoClasses to do this:
.login-field:login-incorrect {
-fx-background-image: url('images/registration_login_wrong.png');
}
.login-field:login-correct {
-fx-image:url('images/registration_login_right.png');
}
.login_tick {
-fx-image:url("images/registration_tick.png");
visibility:false;
}
.login_tick:login-incorrect {
-fx-image:url('images/registration_wrong.png');
visibility: true ;
}
And then the Java code looks like:
private void loginCheck(String loginText){
String login = loginText.trim();
boolean loginIncorrect = (login == null || login.equals("") ;
PseudoClass loginIncorrectPsuedoClass = PseudoClass.getPseudoClass("login-incorrect");
PseudoClass loginCorrectPsuedoClass = PseudoClass.getPseudoClass("login-correct");
loginField.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorrect);
loginField.pseudoClassStateChanged(loginCorrectPseudoClass, !loginIncorrect);
logoTick.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorret);
}
The advantage of this approach is that all style information is stored in the CSS file; the Java code just changes the selector used for the UI elements.
I want to use SASS in a modular way. In the code segment below you can see a way I consider organizing some of the layouts of a page.
What I have in mind is the external variables in languages like C.
// file: some_page.scss
//
// I want some variables from the fonts, colors partials
// to be visible to the buttons partial
// Is it possible?
// error: _buttons.scss (Line X: Undefined variable: "$color_blue")
#import "colors"
#import "fonts"
#import "buttons"
// in file: _colors.scss
$color_blue: blue;
// in file: _buttons.scss
.button {
background-color: $color_blue;
}
Yes, that's how it works.
As long as _colors.scss is imported before the other files.
You can check out the port of Twitter Bootstrap to Sass here: https://github.com/thomas-mcdonald/bootstrap-sass it uses variables in a similar fashion.
You need to add a ; at the end of the #import line.