Unable to import 3rd party CSS files

[hanxue]

Using this template, I have a .vue file that imports the .css in the <script> section.

<template>
  <div id="app">
  <!-- more content here -->
  </div>
</template>

<script>
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import './assets/material-icons.css'

Vue.use(VueMaterial)
// More javascript code here
</script>
<style lang="scss" scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

The files node_modules/vue-material/dist/vue-material.min.css and ./assets/material-icons.css exists.

But when I run npm run dev, I do not see the CSS files loaded

I have another project that uses similar syntax, and the CSS works fine. This is the webpack.conf.js for that project https://gist.github.com/hanxue/4fe712752319178668eadb326e468322

What changes do I need to make so that the CSS files get loaded?

[LinusBorg]

These files don't get loaded individually.

In development, they are included in the JavaScript bundle and then injected into the head section. I'm production, they are bundled together as one css file.

So the fact that you don't see any requests for the files is not an issue. And if the files could not be imported during build, webpack would have shown an error.

Did you receive any errors?

[hanxue]

I don't see any errors, but the CSS is not being applied

[LinusBorg]

Well, then you will probably be better off asking on forum.vuejs.org or chat.vuejs.org, more people to help out there.

Share some reproduction code if possible.

I will close this issue since I don't see how this is a problem with the template specifically

[hanxue]

@LinusBorg Thanks for your prompt reply. I did share the code and the background of the error. I am asking here because it is not a Vue-specific error. I am using the webpack Vue template, and it is not working as expected.

How can I tell from the output or browser, that the CSS file is loaded correctly?

[LinusBorg]

I'll reopen to answer later - short version: since this always worked, no other problems of this kind were reported and no recent changes were made that affect this, I would judge that its rather a usage error than bug, so it's not an issue for github, it's a question for the forum.

How can I tell from the output or browser, that the CSS file is loaded correctly?

Open devtools, look at elements tab and look of the styles are there.

[LinusBorg]

So is there anything left here?

[itsAnuga]

I've had this problem as well, and it was webpack that was missing style-loader.

https://github.com/webpack-contrib/style-loader

[Edit] Which is not included in the template. [/Edit]
[Edit] Oh yea, and the documentation is crap, style-loader says one way of configuring it, and css-loader says another way, but the one that worked for me, was just to load style-loader in the webpack.base.conf.js like this:

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader',
      },
      ...