Include 'normalize-scss' in Vue CLI 3 - vue.js

Just added the package normalize-scss to my new Vue project, but none of the styles are being applied... I've tried both:
#import 'normalize-scss' in my styles.scss
import 'normalize-scss' in my main.js page
Am I doing something wrong? The package is clearly there because the app runs, but it doesn't actually apply any css rules.


I figured it out. You need to put the normalize() after you import it, in your main.scss file. So:
#import 'normalize-scss';
#include normalize();


after installing it with npm import it at the top of main.js file:
import "normalize.css"


If you have a main/global scss file you already use:
Add normalize.css (any of these) to your project: yarn add normalize.css (or npm)
in your main.scss for example: #import '~normalize.css';
Note the ~ for ambiguity as cli docs say: https://cli.vuejs.org/guide/css.html#referencing-assets


Not sure if this is the correct way to do this but, if you are using vue-templates maybe you can try to import the style doing this:
<style lang="scss">
#import 'src/assets/css/mycss_lib.css';
</style>
Also remember, do not use scoped in the style-tags. You also need, scss loader and node-sass to make this work.


npm install --save normalize-scss
In main scss file #import "normalize-scss/sass/normalize/import-now";

Related

How to load external CSS in Vue

I have created a Vue project with Typescript having components in class style. I need to include some external CSS file - like from Amazon S3. The CSS doesn't seems to be loaded.
In the network section I can see it.

I suggest you to use preprocessor
Install SASS -
npm install -D sass-loader sass
then You will be able to import it in your App.vue
<style lang="scss">
#import './static/css/style.css';
</style>
Update
I figured out one more way to include single css file.
In your App.vue, you can add css file to style src
<style src="relative-path/style.css"></style>

you can load external URL
<style lang="scss or less">
#import "https://external_url_.css";
#import ".../assest/_.css";
</style>
you can load css loaders installed if you more such as sass-loader, css-loader , less-loader npm

Can't add Buefy of Bulma to Vuejs project

I have a Vus.js project and I want to add the bulma framework and/or buefy.
I ran npm install bulma and npm install buefy
in main.js, I have:
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
in App.vue, I also attempt to load bulma with:
<style lang="css">
#import '../node_modules/bulma/css/bulma.css';
in assets/scss:
#import "~bulma";
#import "~buefy/src/scss/buefy";
I restarted the vue server, but bulma/buefy styling does not show.

I'm using also Buefy on an github project: https://github.com/Bloemert/Einstein/blob/develop/src/Einstein.WebUI/ClientApp/styles/site.scss
Together with bulmaswatch: https://jenil.github.io/bulmaswatch/
Maybe the link too the github repository will help you?
I don't see what you are missing in your code. An jsfiddle example can help if you need more help.

Try to import on vue component only the style.scss that you defined and imported bulma
To avoid some problems, use <style lang="scss" scoped> when using buefy.
Within the file that you configured bulma, try these imports:
// Accessing all the bulma's core
#import '~bulma/sass/utilities/_all.sass'
#import '~bulma/bulma';
Just a reminder, do not forgot to install this dependencies of bulma, will be needed to be fully functional
"nuxt-sass-resources-loader" && "node-sass": "^4.11.0"
Ps: For further configuration, visit the documentation.

Vue Build fails to include scss

I'm working on a vue.js app. It runs fine in DEV mode, but fails to include / parse my scss while Building (npm run build). I'm using the the Vue PWA template (https://github.com/vuejs-templates/pwa)
My scss is included in the App.vue file like so:
<style lang="scss" src="./styles/app.scss">
I've haven't changed anything in the build/config files.
Should i add my app.scss file as a seperate entry point, I'm quite lost here..|
Thank in advance

Assuming that your node-sass and sass-loader is already setup correctly.
You can use the following way to import your sass file
<style lang="scss">
#import "./path/to/scss"
</style>

Can't seem to get to animate.css

So I did
npm install animate.css --save
Which installed it successfully, I can see it in my node_modules
I want to be able to use animate.css in my elixir-phoenix-react project.
I am just unsure where to import/require it and what the path would even be.
I tried to #import "animate.css"; from my app.scss file but that did not work
I also tried to import "animate.css/animate.min.css"; in my app.js file that also did not work.
My question is where do I import/require animate.css so that it works? I want to use it in my react components to add some animation.

After I installed animate.css in the way below
npm install animate.css --save
I simple had to import the css file like this from my node_modules:
#import "~animate.css/animate.css";
Cheers

So, you can see it in your node_modules folder.
Now, you can use #import in your css file, or just <link> in your head but using the entire path where your animate.css is.
It should be something like node_modules/animate/animate.css
If you want to use it in production, just move the css file into your styles folder.

After installing bulma through NPM, how can I refer it in my project

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.