index.jsx
import 'react-date-range/dist/styles.css'
import 'react-date-range/dist/theme/default.css'
I deployed a Rails app(Rails + React.js) on Heroku.
But styles of react-date-range component are not loaded on Heroku even it is working on local.
What is the way to fix this issue?
Obviously, you're using Webpack and you have configs for loading CSS, instead of using index.jsx add these two pre-compiled CSS into your root of CSS by this:
#import url("react-date-range/dist/styles.css");
#import url("react-date-range/dist/theme/default.css");
If the url function doesn't work try without it:
#import "react-date-range/dist/styles.css";
#import "react-date-range/dist/theme/default.css";
If these two guys aren't in your final bundle file, simply, use relative path, because it is a little hard to add Webpack configuration that Webpack understand node_modules absolute path of libraries inside css-loader.
#import "../node_modules/react-date-range/dist/styles.css";
#import "../node_modules/react-date-range/dist/theme/default.css";
Related
I'm working on a theme and plugin that share components. In my theme I have a scss file and in this I want to import a main.scss file from my plugin. This is the situation:
Plugin main.scss
#import "slick";
#import "slick_theme";
#import "~bootstrap/scss/bootstrap";
#import "~aos/dist/aos.css";
#import "../../../my-directory/**/*.scss";
Theme main.scss
#import "../../plugins/my-plugin/assets/src/scss/main";
II can't compile the main.scss of my theme because it can't resolve the url of node_modules and the directory with wildcards.
Any ideas?
(A) Easiest (and fastest!) way: Use full relative path!
As SASS don't support the wild cards in SASS files using #-rules: just remove wild cards and write full relative path to node-modules like #import '../../complete/relative/path/to/node/module/dir/file.scss' ;-)
(B) ALTERNATIVE: Set includePath
Set node directory as includePath for your project. As I don't know the compiler you use here are the information how to do in original SASS (but 'includePath' variable is almost the same):
https://sass-lang.com/documentation/js-api#includepaths
In that case you are able to #import only by using the filename.
Additional notes:
In SASS rule #import does NOT support mulitple includes at all. Means: in a SASS file #import '*.scss' (as you try in your example by using wildcard * in filename) will not work at all. You ALLWAYS need to specify a concrete single file: #import 'concreteFile.scss'.
In SASS you can remove the suffix .scss from filenames. As this #import path/to/filename'` works as well.
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
I'm creating a vue.js web app, and I'd like to use SCSS to help with the styling. I've installed npm i node-sass sass-loader and I've created a vue.config.js at root level. In it I have this set
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `#import "#/styles/global.scss";`
}
}
}
};
This is SCSS the folder structure
In every subfolder to the main styles folder I have a _all.scss that then imports every containing .scss file for that given subfolder. And in the global.scss all the subfolders _all.scss files gets imported.
// styles/base/_all.scss
#import 'reset.scss';
#import 'variables.scss';
// global.scss
#import 'base/all';
#import 'components/all';
My issue is that my web app doesn't load any of the .scss files or styles imported via the main global.scss file. I get no build errors, and if I for example remove the _variables.scss file, then I get an error that other .scss files can't access the declared scss variables. So that means that my .scss import method is woriking, but the styles aren't shown somehow.
Do I have to use every vue components <style> tag to do all the styling, or can I go about doing it the way I've structured it now?
I prefer not messing with the webpack config.
you can import your style in the main.js also
import '#/styles/global.scss';
I was learning about Laravel Mix that allows us to compile Javascript and CSS files in our project. As I see, in resources/js folder, we can put all the javascript files that should be compiled and in resources/sass folder - all the css files. Using webpacker.mix.js, we import everything in app.js and app.scss but what I want to know is the following: Since, sass files are compiled into CSS, is it possible to import CSS files (and not SASS files) in app.scss? For example, to have this in app.scss:
#import ('css/style.css')
and not
#import ('css/style.scss')
?
Import is not a sass, but a plain css rule. You can use it to import normal css files, yes.
I have Ionic app and trying to use Datepicker from Angular UI Bootstrap. It doesn't have own style files and uses bootstrap.css. So I installed bootstrap and try to import style file with npm-css in my index.css file:
#import "bootstrap";
then I use
npm-css index.css -o bundle.css
Issue is that bundle.css file contain not entire bootstrap.css file.
Only errors in console are about bootstrap glyphicons and I think this is not related with my problem.
Before this I used npm-css without any problems.
It seems there is issue with npm-css and I can't catch it. But when I switch to rework-npm all entire file is imported and all working fine.