Add SCSS file to VueJS app, but not each component

Question

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.

Just fyi, i only have style-loader, sass-loader and css-loader in my build. The stated purpose of style-resource-loader is for variables and mixins to be injected. I'm not sure why bootstrap is being injected for you though... Can you paste how you load 1 of the scss in the components? — blackening
– blackening, Commented Jun 19, 2019 at 18:11
@blackening style-resources-loader in the top block loads the scss into the components before compiling the scss in the single-file component. Is that what you're asking? And you are correct. Globally including the file does not give the component access to the scss, style-resources-loader does. — Randy Hall
– Randy Hall, Commented Jun 19, 2019 at 20:51
hmm, I'm just asking for a snippet of the scss in one component. — blackening
– blackening, Commented Jun 20, 2019 at 2:05
@blackening nothing special. But I cannot recreate the issue now, I'm thinking something else was wrong. Your original answer is correct for this situation. — Randy Hall
– Randy Hall, Commented Jun 20, 2019 at 14:43

blackening · Accepted Answer · 2019-06-19 01:26:55Z

1

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/

answered Jun 19, 2019 at 1:26

blackening

9526 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add SCSS file to VueJS app, but not each component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related