I am working on a project where I am developing a set of UI components for developers to use to build out their sites. I have created an NPM package which consists of just the CSS required to implement an Accordion component.
I installed my css-accordion-component as a development dependency via npm install to a React project created using create-react-app. My Accordion.js file in the React project imports the css-accordion package from node_modules like so:
import "css-accordion-component/lib/accordion.css";
This does bring the styles into my project but none of the CSS Variables defined and used in the file are resolving. The CSS file looks like so:
:root {
--Accordion-bgColor: #fff;
};
.Accordion {
background-color: var(--Accordion-bgColor);
}
I believe it may be because the React project built with create-react-app is not running this imported css file through its post-css plugins. There seems to be a lot of out of date advice online about how to correctly configure Webpack to use PostCSS. Any advice would be really great.
:root {
--Accordion-bgColor: #fff;
};
^^ The semi-colon here proved to be the problem. It caused the whole :root block to fail to render.
Related
I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.
I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).
For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?
The current documentation is not very precise about this. There are actually two cases:
Importing CSS from existing packages
You can pretty easily import CSS files from other Node-modules using the require() function:
import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render
fun main() {
require("bootstrap/dist/css/bootstrap.css")
render(document.getElementById("root")) {
h1 { +"Hello"}
}
}
For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.
Incorporating your own CSS into the Webpack build
This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:
Create webpack.conf.d directory in project's root and put inside some JS file containing:
config.resolve.modules.push("<your_stylesheet_dir>");
This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.
Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:
task("copyStylesheets", Copy::class) {
from(kotlin.sourceSets["main"].resources) {
include("styles/**")
}
into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
// kotlin { js { moduleName = "xyz" }} has to be set for this to work
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
dependsOn("copyStylesheets")
}
Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.
My build:
kotlin("js") version "1.7.20"
index.html
<link rel="stylesheet" href="index.css">
index.css is in the same resource folder as index.html.
This also works for images anything else, apparently.
I have pulled in bulma in my project through :
$ npm install bulma
After that, how can I refer to it in my pages. I really don't know how to work with npm, so please can you guide me. Do I have to refer to it in my js by saying:
import bulma from 'bulma' or require it, I don't know where my files are. That means I don't know where are they located.
You can find the final css build at projectName/node_modules/bulma/css/bulma.css.
Chances are you're using a file loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax:
import 'bulma/css/bulma.css'
within your js. This works because having import [xyz from] 'xyz' will look at projectName/node_modules/xyz, and in the case of a css file, it's as simple as that!
If you do not have that installed, you need to find a way to send it over to the client. Just copy projectName/node_modules/bulma/css/bulma.css into a file, maybe bulma.css, in either an assets or public or whatever you use, then fetch it like you'd fetch any css file within the html: <link rel="stylesheet" href="/bulma.css">
#import "../node_modules/bulma/css/bulma.css";
If you have a main.css file for your project or something similar to that, you can add the above line inside your main.css file. This will import the default bulma.css file located inside your project's path node_modules/bulma/css/ after you have installed bulma via npm.
NOTE: you must include your main.css file( or something similar) inside your index.html as a static import if you chose to go this way.
For that you need to have something like:
<link rel="stylesheet" href="/css/main.css">
I prefer this since bulma is a CSS framework, I think it's best to keep the stylesheets linked with each other.
It's CSS only.
Bulma is a CSS framework.
So you can add it just in your index.html like a normal css link:
<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />
Edit: You have installed bulma through the nodejs environment with the package manager npm so you must have a directory called node_modules and inside the bulma directory.
That is really unevident. If you want to get bulma work with fontawesome5 via npm, minimum working deps (for now) are:
npm i -S bulma #fortawesome/fontawesome #fortawesome/fontawesome-free-solid
then needed to be initialized like this:
import fontawesome from '#fortawesome/fontawesome'
import solid from '#fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'
fontawesome.library.add(solid)
More details can be found here: https://fontawesome.com/how-to-use/use-with-node-js
I had the same issue in Vue and in the end I solved it thanks to this link. For Bulma you just need to run:
$ npm install bulma
After npm install, your files should be located under node_modules folder.
For Bulma, check that you have a folder bulma under node_modules, then you can import bulma css framework in your main.js file as follows: import "./../node_modules/bulma/css/bulma.css";
Note: even if on the link I provided they suggest the full path to bulma this is not a good practice as #Omkar pointed out, so I ended up importing bulma as follows: import "bulma/css/bulma.css";
Alternative Answer: CSS Preprocessing
I'm posting a somewhat indirect way to answer the question. I came here looking to see how I could use rendered SASS in my main app.js (in my case, for use in a pug.js template).
The answer is: use a CSS pre-processor. In this minimal example, I'll use node-sass.
0. Install:
npm install node-sass
npm install bulma
1. Create an inherited style
mystyles.scss:
#charset "utf-8";
#import "node_modules/bulma/bulma.sass"; // <--- Check and make sure this file is here after installing Bulma
This will inherit styles from the Bulma installation, but override those styles with what you place here.
2. Build the CSS
app.js:
const nsass = require("node-sass");
const rendered_style = nsass.renderSync({ // <---- This call is synchronous!
file: "./mystyles.scss",
});
Here, node-sass is processing the .scss file into a Result object that has CSS buffer. Note that node-sass has an asynchronous call (sass.render()) as well, if needed.
3. Use the CSS
The buffer containing the CSS is now available at rendered_style.css
console.write(rendered_style.css)
--Notes--
The benefit of the SASS approach is that it unlocks Customization, which is what makes Bulma powerful!
Keep in mind that if app.js is your entry point, the CSS will be rendered every time you run the server. If your styles aren't changing frequently, it may be best to write it out to a file. You can see more on this approach in the Bulma Documenation I adapted this from.
declaring this in the index.html file worked for me.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
In React, we have to declare this in the same html file where the root of the app is present.
I'm new to Aurelia, so I'm not really sure how this should work. I created a new Aurelia project and also installed bootstrap simply by doing jspm install bootstrap. I saw in console that this also pulled in jquery 3.0.0.
Now my question is, how do I use bootstrap.css, bootstrap.js and jquery.js in my project?
First attempt:
In app.html I tried to do thhe following:
<require from="bootstrap"></require>
I tried that because I have the following line in my config.js:
map: {
...
"bootstrap": "github:twbs/bootstrap#3.3.6",
...
}
This sort of works in the sense that it loads bootstrap.js, but then gives an error in browser that it's missing jquery.js. So it's not automatically loading jquery for me. Is this normal?
Second attempt:
I changed my require to this in app.html:
<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>
I'm not sure how it knows where to look for the bootstrap.js and bootstrap.css file, since they are located in: jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css etc. But it knows how to find the bootstrap files. But not the jquery file.
I have this in my config.js for jquery:
map: {
...
"github:twbs/bootstrap#3.3.6": {
"jquery": "npm:jquery#3.0.0"
},
....
}
So basically my question is, how should this work? Should require autoload all the necessary files when I <require from="bootstrap">. Or should I still load them as individual files? If so, how do I then load jquery in this case?
The require element is for pulling in Aurelia components, html templates (which are Aurelia components), or css files. It isn't for loading javascript files.
The Aurelia skeleton shows how to load Bootstrap in its main.js file:
import 'bootstrap';
is the first line in the file. This will initialize Bootstrap's javascript code.
In app.html a require element is used to load Bootstrap's css:
<require from="bootstrap/css/bootstrap.css"></require>
Importing jQuery in to a file is pretty simple as well:
import $ from 'jquery';
Then you can use the $ function however you would like.
I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-
To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
npm install bootstrap --save
Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:
npm install jquery#^2.2.4 --save
then restarted the app as packages were updated and ran it again ... FIXED!
after adding
import 'bootstrap';
in main.js, you may need to stop the app (Ctrl + c) and run it again with
au run --watch
to make it work.
I see repositories like bootstrap starting to include additional tags in their package.json file such as 'style' and 'less.' How can I use these tags to import assets?
package.json
{
"name": "bootstrap",
"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",
"main": "./dist/js/npm"
}
I am using ES6 modules and webpack. I want to do be able to import my stylesheets using the style tag in package.json.
Currently I am doing something like this:
my_stylesheets.less
#import "~bootstrap/dist/css/bootstrap";
which is annoying for consumers to add the path when it is available in package.json. Is there a way I can import stylesheets using the tag in package.json?
If I cannot use the tag in package.json, is there a standard way of importing stylesheets in ES6 modules?
Yes!!! Webpack treats everything as a module, including that cute little package.json in your repo.
Therefore, you simply need to require() it into your app and then access properties from that json object. (See json-loader for more info).
I often use this to import data like version number etc for my Webpack config file for bundling and versioning.
This feature is not included in webpack for now. There is an open issue about this in webpack's CSS loader repo.
There is also an SO thread on the use of the style field, and it seems that there are some npm / browserify tools that support this.
I have a very basic Ruby on Rails installation. I have installed the bootstrap-sass gem, have the 'bootstrap-sass' ~> 2.3.1.0 in my Gemfile and ran bundle install. Restarted all applications. I have a style.css.scss file in app > assets > stylesheets which #imports 'bootstrap'; as well as the responsive. Those styles actually get pulled into my app, because they style the front-end. However, when I try to use a variable or mixin, I get the error in the image attached, as well as IntelliJ telling me it cannot find the variable. I'm new at this whole process, so I'm just trying to understand what's needed to resolve it.
I am using Ruby 2.0.0 and Rails 3.2.13rc2
https://docs.google.com/file/d/0BwMz3RH42HtQb0U1TXdHTVF0QjQ/edit?usp=sharing
#import "bootstrap";
body {
padding-top: 60px;
}
#import 'bootstrap-responsive';
.footer {
margin-top: 50px;
color: $greyLight;
a {
color: #e5e5e5;
}
}
here is a link to the live dev site on heruko, without use of the variables:
http://shrouded-ocean-4277.herokuapp.com/
EDIT: in my vendor/assets/stylesheets folder, there is no bootstrap folder or _mixins or _variables files. Should these have been installed when I placed the gem in the Gemfile and did an bundle install?
EDIT: adding my github: https://github.com/ChrisSki/omrails
Regarding your edit, the bootstrap will not be in vendor, but in a .gem file located somewhere inside your Ruby installation.
I set up a similar application recently, following this guide. I have 2 .css.scss files, one which includes and overrides parts of bootstrap, and the other one which contains my application's style (not directly related to Bootstrap). If you look at the second file, you can see that I imported bootstrap/variables because I needed to have access to some of Bootstrap's variables, and it works like a charm.
What I don't understand is why your original screenshot complains about something named variables, which I cannot see in your SCSS file... Have you tried bootstrap/variables instead?
EDIT:
I just cloned your repo, started the server and hacked style.css.scss. I think you made a typo in your tests :)
h1 {
color: $greyLight; /* Does not work!! */
color: $grayLight; /* Works :) */
}
You should declare your variables before you import bootstrap, then you can use the variables in your scss.
For example, here's how I use variables in my rails app:
/************************ CSS Variables ***************************/
$myColor: #0F851C;
/************************ Import Bootstrap ********************************/
#import 'bootstrap';
body { padding-top: 80px; }
#import 'bootstrap-responsive';
Just define your variables at the top of your scss, then import bootstrap. Then in your scss, you can use those variables like this:
#myDiv {
color: $myColor;
}
Hope this helps!