I cannot use .css files on vue.app

[moracabanas]

No matter how I try to import .css file with fonts on app.vue it doesn't work.

Im following this example from vue.app from https://github.com/vuejs-templates/webpack/issues/604#issuecomment-287620657:

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

When I try to build the project It shows the error:

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve './src/assets/css/app-common.css' in 'C:\Users\myuser\Documents\GitHub\my-project\src'

Also I installed sass-loader and node-sass as suggested on Vue documentation: https://cli.vuejs.org/guide/css.html#pre-processors

[Dreamst]

+1

[Dreamst]

Hi, I had the same problem. I needed to use external styles and fonts from another project and here is the solution to bypass the webpack/CLI way of handling thing (checks every path etc...).

The only way i've found is to add a link tag in the index.html (in "public" folder): Note: It's important to include a "type" and a "rel" attribute:

Example:

mounted () {
       var head = document.getElementsByTagName('HEAD')[0];  
  
        // Create new link Element 
        var link = document.createElement('link'); 
  
        // set the attributes for link element 
        link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'rsc/contrib/css/particuliers/base.css';  
}

[WilliamVenner]

+1