I created a basic React application using CRA and react-bootstrap. I would like to load different bootswatch themes. All themes are downloaded and placed inside a src/themes folder. Each theme has its own folder with fixed set of filenames:
src/themes/
superhero/
_bootswatch.scss
_variables.scss
bootstrap.css
bootstrap.min.css
/cerulean
_bootswatch.scss
_variables.scss
bootstrap.css
bootstrap.min.css
and so on...
Now suppose I want to load superhero theme. This can be done in different ways which I show below:
I renamed index.css of CRA to index.scss and added the following lines to the top of the file (I have node-sass installed):
#import "./themes/superhero/variables";
#import "~bootstrap/scss/bootstrap";
#import "./themes/superhero/bootswatch";
I add the following line to index.js:
import './themes/superhero/bootstrap.min.css'
Both of these methods are working fine independently. What I want to do is to import them in index.js like this:
import './themes/superhero/_variables.scss'
import 'bootstrap/scss/bootstrap.scss';
import './themes/superhero/_bootswatch.scss'
When I do this, the first two lines get imported properly but I receive undefined variable errors when it comes to the third import, _bootswatch.scss. This is because the first two files are independent. I think there are dependent variables in the third file but on each import they are somehow scoped differently and hence the last import does not have access to the variables. This is not the case for method 1, they are all imported to a single file and then node-sass takes care of them.
Any ideas how to solve the issue?
As far as I know, you have to choose the first one if you want to use the scss versions of the bootswatch themes to override some variables or whatever you want to do with them. The scss files will be preprocessed and converted into one single css file. So when you import an scss file in a js file the scss file will be converted into a normal css file and that will be imported into your js file at the end of the whole process. Therefore, the variables scss file will be a single css file that cannot visible from a different file. That is why you have to import the variables inside an scss file, to be availabe in build time. (Also, the _ shows you in the filenames those files are partials).
I use the bootswatch themes as well a lot and I always use them as you described in your first option, import all of them inside my own index.scss file or whatever and then that file can be imported inside any js file:
// here goes my personal variables
#import "./themes/[theme_name]/variables";
#import "~bootstrap/scss/bootstrap";
#import "./themes/[theme_name]/bootswatch";
Check the offical sass guide site, preprocessing section: https://sass-lang.com/guide
Related
Background
Our web application follows a component-based design pattern, with each component containing a template, Sass partial, and JavaScript module, like so:-
components/action_button/_action_button.html.erb
/_action_button.scss
/action_button.js
The JavaScript module imports the component's Sass partial and the template is rendered via Rails. Webpack is configured with a number of loaders and plugins to compile the styles and extract (via mini-css-extract-plugin) the resulting CSS into a standalone stylesheet for each entrypoint e.g.:-
home.js => home.js, home.css
search.js => search.js, search.css
Components are imported into entrypoints based on usage (i.e. if action_button is present on 'home', then it's rendered somewhere within the view and import '~/components/action_button/action_button.js'; is declared within home.js.
The Problem
In order to improve the page loading experience we're manually #importing a select few component Sass partials into a critical.scss entrypoint, the outputted CSS is then inlined into the <head> of the document and the full stylesheets are loaded asynchronously.
Ideally, we'd like to do this dynamically and one method I've thought of is denoting the criticality of a component via the import statement. Perhaps using a custom loader?:-
import 'critical-loader!~/components/action_button/action_button.js';
The issue is that I've little idea of how that Webpack loader would work. I essentially want it to leave all existing rules in-place, but redirect the extracted CSS from Sass partials imported from within it to critical.css.
Does anyone know of an existing solution or have any idea of where to begin with a problem like this?
I don't have a huge website, but I still want to maintain css separate from my js files.
My folder structure:
static
css
style.css
js
landing.js
In my landing.js file, I have: import styles from '../css/style.css';
With the above mentioned setup, I am getting this error:
react-dom.production.min.js:12 Uncaught Error: Minified React error #130;
Am I doing something wrong? If I must use something like webpack to avoid getting minified errors, why is that the case? Why can't I just use simple CSS?
Note: I'm not using JSX
Link the css file from your main html file where you have the root div of your app.
For importing css in .js files in reactJs env you need to set up css-loader.
But if you don't want to play around with webpack or other bundlers, include your css in html file for now.
Other variant is write inline css in your React component, or use stylesheets like Radium.
Instead of importing it in styles just include your css like this
import '../css/style.css'; // ES5
require('../css/style.css');
later after compilation it will become part of your build.
I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors "can't resolve the dependencies" like fonts.Exist other way more efficient and "more right" for the angular standards like through angular-cli.json or something else??
I have searched everywhere how I do this but no luck.
Firstly generate new component and you can use this component to design your own template and to add own CSS
as follow:-
firstly generate new component ng g component mycomponent
new component will be created like below :-
mycomponent
mytest.component.css
mytest.component.html
mytest.component.spec.ts
mytest.component.ts
then you can add your styles at .CSS file, your all template at .html file and all logical content at .ts file
you can add this component at index.html
<app-mycomponent></app-mycomponent> // app-yourcomponent name
when you create the project i wonder you have a src folder. Inside this folder you have an assets folder: here you can paste all the code and images from your html code.
Next, you have these options:
Import the static files of your html theme one by one on the index.html in this way:
and so on..
In your angular-cli.json file:
"scripts": ["../src/assets/js/jquery.min.js"],
and so on with all your code scripts. The css styles have a styles array in the same angular-cli.json file.
Last but not least, if your html theme have images and other static content incorporated, you can access all this content in this way:
<img src="../src/assets/images/logo.png" alt=""></a>
so, you access the local folder of any file with ../ and if you want to access a superior folder you can use ../../ and so on until you get in the root folder.
I have a file mobile.styl that collects all styl files I need via #import:
#import '../../common/styles/colors'
#import '../../common/styles/init'
#import 'landing'
#import 'faq'
#import 'vehicle'
I have two 'landing' styl files, one is in current folder where mobile.styl is and another is where those two first imported files are ../../common/styles/.
If I have the order of imports like shown above, then stylus imports first colors and init files which is fine, but then it loads landing file NOT from current folder where mobile.styl is, but from ../../common/styles/ so I get the wrong styl file, which is for desktop version.
Now, if I put those two imports to the end of the file, then it first loads landing, faq, vehicle properly, then those two files from the proper paths as expected.
Is this a bug or intended behaviour?
I've dealt with this same issue. A few solutions I've found are:
Rename one of the files to something unique.
change landing.styl to landing-mobile.styl
Move the file you want to import into it's own folder
move landing.styl to mobile/landing.styl
Import a file from the folder root you want to be in before importing the file of the same name
import empty.styl that lives next to landing.styl then import landing.styl
Lastly, you can reference the path relative to the last file imported
import ../../landing.styl
I've placed the options in order of my personal preference, but they all should do the trick.
I've got a preamble.lessimport file with definitions of standard colors, sizes, mixins etc. that I import in all other .less files. So far, the file was placed in /client and I included it with
#import '/client/preamble.lessimport';
Worked as a charm.
Now, I'm moving all styles to a smart package to make them reusable. How do I include the preamble now?
I've tried putting it as preamble.lessimport in the main package dir and then including with both
#import '/preamble.lessimport';
and
#import 'preamble.lessimport';
Both result in the compile error:
While building package `theme`:
input: Less compiler error: '/preamble.lessimport' wasn't found
Placing the file in a subfolder didn't help. The file is added in package.js and I use less package in both client and server.
How can I properly import that file?
Edit:
I've worked around this issue by importing via relative path:
#import '../../../preamble.lessimport';
However I'm not happy with that solution as the package is on early stage and files inside tends to move a lot. Is there any absolute path I could use?
As of meteor 0.7 you no longer use the .lessimport extension. Your less files should have the .import.less extension.
Take a look at how the bootstrap3-less project imports bootstrap for best use examples.