CODEWITHSUNDEEP
vue.jswebpacksasswebpack-style-loader
Randy Hall
Randy Hall

Reputation: 8127

Add SCSS file to VueJS app, but not each component

I have the feeling I'm thinking way too much into this, but I cannot find what I'm looking for in this pattern.

I have a VueJS app with several components and it all works. I'm using style-resources-loader to pull in my global variables and mixins and such into each component. This works as intended. 

module.exports = {
    pluginOptions: {
       'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
              path.resolve(__dirname, './src/styles/variables.scss'),
              path.resolve(__dirname, './src/styles/text-mixins.scss'),
              path.resolve(__dirname, './src/styles/interactive-mixins.scss'),
            ],
        }
    },
}

I also have an app-level style sheet. Resets, general layouts, etc. These are not things I want pulled into the SCSS processing of each component - just something I want output in the final CSS for the application.

Everything I find when looking for "how to add SCSS file to Vue" is all about the resource loader for the component processing. I cannot include the global styles in this way and then rely on de-duping to remove the extraneous ones - the imported global styles are being scoped by the built-in component scoping, which is causing bloat and is just generally a bad pattern.

I also don't want a separate Webpack build and CSS file as the end product if I can avoid it.

I can put this inside say the root level App style block, but that's not a great place to work with page-level CSS. It would be ideal to have this a/a set of SCSS files separate from components, but part of the Vue App's SCSS compiling.

Update

Had a big block of stuff here, not sure how it got in that state but that is not the case now and I cannot recreate it.

Upvotes: 1

Views: 1609

Answers (1)

blackening
blackening

Reputation: 953

Throw them in your entrypoint. Literally include the scss within the start. Like this in your app.ts or app.js :

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' <-- like this

Vue.use(Buefy)

If your webpack is setup correctly, e.g. Vue cli, then it doesn't care how the scss is found. It will just inject it globally. Vue components are also global unless you specify scoped scss.

Example from https://buefy.org/documentation/start/

Upvotes: 1

Related Questions