Webpack: How the hell can i include a css file?

[IvRRimum]

Just set it up. Added a file in assets/css/mycsss_lib.css
At what path can i access it?

[everystone]

I just keep mine in /static/.
<link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">

[Christilut]

I usually import mine in App.vue in a SCSS style block:

<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>

You'll need the scss loader and node-sass for this.

[IvRRimum]

I did it like this:
main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
require('../node_modules/bootstrap/dist/css/bootstrap.min.css')
require('../node_modules/font-awesome/css/font-awesome.min.css')
require('../node_modules/simple-line-icons/css/simple-line-icons.css')
require('../node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css')

require('./assets/layout3/css/layout.min.css')
require('./assets/layout3/css/themes/default.min.css')
require('./assets/layout3/css/custom.css')
require('./assets/css/components.min.css')
require('./assets/css/plugins.min.css')

[simonknittel]

Just started using/experimenting with webpack and did install normalize.css with npm install normalize.css and then imported it with import 'normalize.css'; and it's working. Do I understand something wrong here or why do you try to manually find the path to the node_modules directory?

[dirkraft]

For the record, in a project set up with the vue cli, with

npm install --save semantic-ui-css

I did this in main.js

require('semantic-ui-css/semantic.css')

[samayo]

How can we do the same for js scripts?

[WowMuchName]

I'm having a lot of difficulties importing stylesheets. I use a pure typescript setup based on this repo. I can see in the webpack output that the stylesheets are packaged into the bundle but they are not applied in the app.

The only (non-static) thing that worked was importing them via scss as @Christilut suggested.

In my personal opinion webpack can get really complicated and to me it is often unclear why and how the config-snipped I just grabbed from the internet actually works. Letting the scss processor just merge everything together and present it as one unit to webpack seems advantageous to avoid a lot of pitfalls when it comes to configure webpack properly.

[ErikAGriffin]

If anyone else is trying to import css cleanly and hitting a "Failed to compile" error, make sure you've included a loader in your webpack config.

So in my main.js I have import 'normalize.css';, and the following less/css loader set up in webpack:

            {
                test: /\.(css|less)$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }

Those are three separate packages,
npm install style-loader css-loader less-loader --save-dev -E

[patriciag18]

@WowMuchName Could you provide an example? I am having a similar issue with the styles.

[rajeevbbqq]

Simply on your component / main.js

<script>

require('@/assets/css/main.css')

export default .....

</script>

If fails,

npm install style-loader css-loader

At your webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]   //  <=  Order is very important
      }
    ]
  }

After that on your main.js

require('@/assets/css/main.css')

[btseytlin]

I was using browserify and no solutions were working.

I solved it by adding "../node_modules" to the path.
Now my App.vue is like this:

<template></template>
<script></script>
<style src="../node_modules/vue-multiselect/dist/vue-multiselect.min.css"></style>
<style></style>

[ajmas]

okay, that helped.

[jaraddlfisher]

This seems kind of rediculous to have to configure something as simple as a stylesheet.

[LinusBorg]

that's a very helpful comment.

On a serious note I don't understand what the problems were that people were having, both @import in style blocks and require() calls in the javascript simply work. This template is preconfigured for that, and always has been.

[jaraddlfisher]

Sorry Linus,
I just started looking at Vue only a few days ago, and this is one thing I'm struggling with, as it seems many others have also.
I agree that the import style blocks "work"
I do experience the "Flash of unstyled content" as described here

I've followed the loader instructions https://vue-loader.vuejs.org/en/configurations/extract-css.html,
but I havent played with it enough to understand if this will load that stylesheet in every component.

Can you shed some light on this?

[LinusBorg]

FUC can normally only happen if you write some markup in index.html. if you write everything in components (including App.vue), that should not happen.

[jaraddlfisher]

I'm certain that's my problem, Thanks!

[ali-turki]

In main.js import "@/assets/sass/app.scss"
then in your app.scss
import all css/scss components
but make sure you have node-sass sass-loader installed

[rafaeldiaz21]

I did this in my main.js and it's works:

import Vue from 'vue'
import App from './App'
import router from './router'
import materialize from 'materialize-css'

import 'materialize-css/dist/css/materialize.min.css'
Vue.use(materialize)

new Vue({
el: '#app',
router,
materialize,
components: { App },
template: ''
})

[raisty]

Can somebody explain differences between @import, import and require in case of this issue (css) and webpack?

[itaditya]

@import is CSS/SASS syntax to include other files.
import is modern ES6 syntax to include modules.
require is AMD/CMD syntax currently used by Node.

[dnhyde]

I struggled with similar issues in the end what worked for me was importing the css as suggested in Integrating and Using CSS Frameworks with Vue.js.

In my case I installed bulma: $ npm install bulma
and imported it in my main.js file with import './../node_modules/bulma/css/bulma.css';

Hope this helps.

[crtjr64]

I'm using type script and its not working. Granted I'm very new to Vuejs and have decided to jump into the deep end using Bootstrap-Vue and Typescript, but the Carousel was not working because the css did not seem to be there even though I imported it using

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

All other css, not in the npm_module is working and when I copied the css reference to the ClientApp folder in a css folder there, then it worked along with the custom css files located there using
import './css/bootstrap.css';

Even though this works, I feel like its a hack, and that there's a better way to do this that's intrinsic to Vue and Bootstrap and TypeScript. Unfortunately, I haven't found it and documentation on this trio together is sparse. So, if anyone else has any ideas, I'd love to hear it.

[longrunningprocess]

fwiw, here's what worked for me after npm install normalize.css

within main.js: import 'normalize.css';
OR
within App.vue:

<style>
@import '~normalize.css';
...

The ~ was required in the <style usage.

[Rivk17]

Adding a required to the main js is also a great way so solve this
require('./app/css/style.css');

[exmackina]

For Single File Components (with Vue.js v2) :

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns

[geabenitez]

I did it like this:
main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
require('../node_modules/bootstrap/dist/css/bootstrap.min.css')
require('../node_modules/font-awesome/css/font-awesome.min.css')
require('../node_modules/simple-line-icons/css/simple-line-icons.css')
require('../node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css')

require('./assets/layout3/css/layout.min.css')
require('./assets/layout3/css/themes/default.min.css')
require('./assets/layout3/css/custom.css')
require('./assets/css/components.min.css')
require('./assets/css/plugins.min.css')

@IvRRimum Are you using Metronic? this seems like version 4. is it? if so, have you been able to do it with verison 5?

[iamwwc]

none of these are what I want, I want write css in assets/ folder, and let webpack compile my scss, inject into html..

[arga1234]

simply, you can add the css file that saved in assets with this :

open your App.Vue than write this :

make sure that you have install scss or sass loader in terminal with this --> npm install -D sass-loader node-sass

turn off your node.js first install that loader and turn on it again

[demiro]

how can I import a dynamically file from environment variables?
I would like to do something like this:

<style lang="sass">
  @import"./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";
</style>

or
import "./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";

How can I accomplish this?

[amdp]

Hi, I'd like to share this strange phenomenon ( ;-) )

main.js vue file:

...
require('../node_modules/bootstrap/dist/css/bootstrap.css')
require('../node_modules/bootstrap/dist/js/bootstrap.min.js')

require('./assets/css/coo.css')
require('../node_modules/bootstrap/dist/css/coo.css')
...

the first two work, the second two do not, where coo.css is a css I created and copied into the vue folders, even in the node_modules/bootstrap one to test why it couldn't be "found".

I solved the problem and it was simple, but I'd like to share it here: in my css there were links that do not work properly in the current folder setup in vue. Quoting the links first as per a test and then updating the path in my css solved. So be careful: if your css isn't working but it includes links, check the links with accuracy, because it will give you a "not found" error anyways :)

[alanyong91]

I have no question here but I just like the way you write the title.

[o8e]

how can I import a dynamically file from environment variables?
I would like to do something like this:

<style lang="sass">
  @import"./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";
</style>

or
import "./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";

How can I accomplish this?

Did you ever work this out? Have a similar scenario.

[xerosanyam]

I usually import mine in App.vue in a SCSS style block:

<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>

You'll need the scss loader and node-sass for this.

is there a similar way to load html file inside ?

[colossus21]

that's a very helpful comment.

On a serious note I don't understand what the problems were that people were having, both @import in style blocks and require() calls in the javascript simply work. This template is preconfigured for that, and always has been.

You are the MVP. You just simply put @import('...') inside the style tag.