In React, in order to style a component, I simply import the style file that sits in the same directory as the component, e.g., import './style.scss'. It's simple and easy, no problems there.
However, I can't seem to make this work in Preact. The style file just never get applied, even after following the docs and of course installing node-sass and sass-loader. I see plenty of examples out there using CSS modules and a few with CSS in JS, but I'd like to do a bog-standard import if possible.
Thanks in advance for any help you can provide.
Apparently the solution was to disable CSS modules altogether by installing css-loader and adding the following to my preact.config.js:
const css = helpers.getLoadersByName(config, 'css-loader')[0];
css.loader.options.modules = false;
Related
I have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
Today I've started using ionic 3 for the first time. I don't really know anything about it, so that's why I wanna learn how it works.
I've created a sidemenu project and now I want to add some global styling in my app.scss, so I can use it in any page of my project. Well, I've added simple styling to my app.scss but nothing happens on my page. Everything still looks the same. Now my question is: Do I have to import the app.scss somewhere? If so, where? Or how can I use the app.scss?
I thought it would happen automatically, that my page uses also the classes of my app.scss and not only of it's own stylesheet, but to me it seems like it doesn't even know the classes of the app.scss.
within the app.scss you can create class use them normally as class="class-name" on html.
Hope I helped you.
You can just use it, no need to import it anywhere. A few things to keep in mind though:
There are things you would like to add at a global scope like for example if you want to enable newlines in toast messages you add the following:
.toast-message {
white-space: pre-line;
}
If you want to add something only for iOS you add it as a sub element of the ios class:
.ios {
... // your iOS-specific css rules
}
If you want to add somehing only for Android (material design) you add it as a sub element of the md class:
.md {
... // your android-specific css rules
}
An there is also a wp class for windows phone if you should need it.
Make sure you have a look at ionics theming docs.
I am attempting to import fa-carot-down, but I don't want to import the whole library. I need a single icon, but I'm not sure how to include it.
I'm using Webpack and SASS, if that makes any difference.
Alternatively, any means to get a carot icon for my dropdown would be appreciated.
You can try IcoMoon and Fontello as it helps you create your own library of fonts.
Furthur you can bundle it together with webpack to import the necessary icons
Now svg's are supported in IcoMoon
I am wondering if it is possible to add .scss file in my component in Angular 2?
Let's say I have the following:
#View({
template: `
<div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>`,
styleUrl: ['style.scss'],
directives: [NgClass]
})
Is compiling the scss file to css the only way to achive what I am trying to do?
Thanks
It is possible, but you need to make server able to support this type of files, e.g. compile them on the fly during request, or maybe take precompiled CSS files from cache. In any case, the response when you navigate to
GET /approot/component/path/style.scss
needs to be valid text/css type. By default no webserver is going to do it. It is totally possible with Express, Apache, etc. but it requires configuration.
Another option is to use styles instead of styleUrls and require SCSS with bundlers like webpack:
styles: [require('style.scss')]
Above should work, but the notation is not that nice.
Finally, I would probably go with
styleUrls: ['style.css']
... and use SCSS for development, making sure my watch/build task compiles scss->css and puts style.css just next to style.scss in the same directory (on in the dist, wherever it needs to be). So you work with SCSS and never touch generated CSS, which is there only to be consumed by app.
styleUrls for now must be only css files list, so you need to provide the name of .css file to apply for components, so simple to think about provide the name of compiled .css file from .scss file, I found very helpful link to make that and with very well explained example:
http://www.angulartypescript.com/angular-2-sass/
This even should work in long term, hopefully the angular 2 somehow support the .scss and internally compile it.
I recomend adding scss files through import:
import 'style-loader!./your-scss-file-name.scss';
make sure the file url is correct.
So I've recently set-up a new project using Zurb's Foundation. I've got the default setting working from the gem setup (http://foundation.zurb.com/docs/sass.html).
The problem I am having is amending the buttons. By default my buttons appear square & I want a nice rounded corner style. So within the _settings.scss I have amended the following line:
$button-radius: 30px;
But nothing happens. So after reading the documentation I tried creating my own button class and including the button mixin like so:
.your-class-name {
#include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}
But when I do this I get an error saying that $padding doesn't exist! This has royally confused me as it's used throughout Foundation (or so I understand).
Can anyone suggest what may be going wrong here. I can provide any additional information if need be.
Lastly, I don't think the $global-radius option is being applied, because when I change the property but it's not causing an error so I'm a little stumped!
EDIT:
Here is the top of my core SASS file:
// Global Foundation Settings
#import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
The default $border-radius did not work due to a bug in Foundation. I ran into it as well, but when I now went to double-check, it appears to have been fixed already in this commit. The problem was that $button-radius was defined twice in the settings file, one for buttons in general, and one for buttons in forms. The latter has now been renamed to $form-button-radius.