Shared scss file with variables


#1

Basically, at some component I wanted to use colors variables that are defined in another file:

<style lang="scss" scoped>
@import url('~/styles/colors.scss');

  .hello-world {
    margin: 20;
  }

  Label {
    color: $muted;
  }
</style>

and I’ve added src/styles/colors.scss file:

$muted: #999;

This ends up with an error at the build time:

ERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":0,"remove":true}!./node_modules/css-loader?{"url":false,"includePaths":["/Users/lbalcerzak/temp/my-app/node_modules"]}!./node_modules/ns-vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/ns-vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/components/HelloWorld.vue
Module build failed:
    color: $muted;
          ^
      Undefined variable: "$muted".
      in /Users/lbalcerzak/temp/my-app/src/components/HelloWorld.vue (line 35, column 12)
 @ ./src/components/HelloWorld.vue 4:2-445
 @ ./src/main.js

I’ve created a project using vue-cli-template.

Does anyone know how can I share scss variables in my components? Maybe there is some other way?


#2

Try to replace your import deleting the url().


#3

Unfortunately, this doesn’t help. But it gave me a hint as it started to fail at the build time with “File to import not found or unreadable: ~styles/colors.scss.” After looking into webpack config it looks obvious now.

Solution:

Modify scssLoader at “webpack.config.js”:

  const scssLoader = ExtractTextPlugin.extract({
    use: [
      {
        loader: 'css-loader',
        options: {
          url: false,
          includePaths: [path.resolve(__dirname, 'node_modules')],
        },
      },
      {
        loader: 'sass-loader',
        options: {
          includePaths: [path.resolve(__dirname, 'src')],
        },
      },
    ],
  });