# Sage 9 ~ Vue ~ Global Sass Variables/Imports in Webpack

**URL:** https://discourse.roots.io/t/sage-9-vue-global-sass-variables-imports-in-webpack/15188
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2019-03-27T22:29:07Z
**Posts:** 1

## Post 1 by @db12 — 2019-03-27T22:29:07Z

I’m having trouble getting global sass variables with sass-loader to work properly. I combined the instructions [here](https://vue-loader.vuejs.org/guide/pre-processors.html#sass) with [pascallaliberte’s method](https://discourse.roots.io/t/adding-vue-js-to-sage-9-dependencies-and-approach/9644/11) of implementing vue-style-loader for CSS. So the rule is placed above the other `test: /\.scss$/` and looks like this:

```
{
        test: /\.scss$/,
        exclude: config.paths.assets,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader',
            options: {
              data: `@import "scripts/vue/Project/SCSS/test.scss";`
            },
          },
        ],
      },
```

When I load a variable (or try to import a file) into test.scss, I’m still getting a build error ‘undefined variable’ when trying to use it in the single file component:

```
<style lang="scss">
</style>
```

The `test: /\.css$/` rule from the above instructions is still present.

Any ideas?  
Thanks.