0

When a project is created by the Vue-CLI 3, a public/index.html is created.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Website</title>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

I would like to add an external CSS file into the head, but the source file is in SASS/SCSS. The reason I would like this file is to style the markup around the Vue app (<div id="app">/<div>), like the <body> element. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Website</title>
        <link href="[I want to reference a compiled SCSS file here]" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <noscript>
            <strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

I read the Vue-CLI 3 guide on CSS, https://cli.vuejs.org/guide/css.html, but I am under the impression that the advice on that page is for integrating SASS into single-file components (*.vue files), like allowing single file components to access global SASS variables. Can I get the Vue-CLI 3 build process to compile a SASS file that isn't directly related to any of the *.vue files but is still part of the Vue app for deployment purposes?

Stephen
  • 2,410
  • 3
  • 33
  • 57
  • Does the scss file belong to the same project? – lmarqs Sep 01 '18 at 20:56
  • @Imarqs: Yes, the SCSS I want belongs to the same project, and I want it deployed with the project when I do "npm run build", but the CSS styles in that SCSS file don't affect any of the Vue single-file components. As I wrote in the question, if I wanted to remove padding and margin to the element, can I add a SCSS file somewhere in the Vue project and still have vue-cli build it and include that SCSS in the final bundle? – Stephen Sep 01 '18 at 21:00

1 Answers1

1

I cannot find an answer to my specific question.

However, I did find a discussion in the Vue Loader Github repo.

https://github.com/vuejs/vue-loader/issues/328#issuecomment-363165459

https://github.com/vuejs/vue-loader/issues/328#issuecomment-363189176

Basically, any global styles that do not contain SASS variables or mixins can be imported into App.vue's style block without a 'scoped' attribute. 

<style lang="scss">
@import './scss/main.scss';
</style>

Any Vue component that needs access to SASS variables will require a small change to Vue.config.js

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}
Stephen
  • 2,410
  • 3
  • 33
  • 57