Vue-styleguidist: Importing global styles not working

[fishkes]

I'm trying to import a global main.scss file using the require attribute but it's not working.

I see no error in the console but when i try to use an scss variable in one of my components I get an error that it's not defined.

Here is my styleguidist.config.js:

const path = require('path')
const utils = require('./build/utils')
const vueLoaderConfig = require('./build/vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  assetsDir: path.join(__dirname, 'static'),
  require: [path.join(__dirname, 'src/assets/scss/main.scss')],
  components: 'src/common/**/*.vue',
  webpackConfig: {
    resolve: {
      extensions: ['.js', '.vue', '.json', '.scss'],
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': resolve('src')
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [
            resolve('src'),
            resolve('test'),
            resolve('node_modules/webpack-dev-server/client')
          ]
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'css-loader' // translates CSS into CommonJS
            },
            {
              loader: 'sass-loader' // compiles Sass to CSS
            }
          ]
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('media/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        }
      ]
    }
  }
}

Here's my simple component:

```

Here's my main.scss:

$turquoise-blue: #08b1d5;
$tealish: #2cbcdb;
$pinkish-grey: #d0d0d0;
$duck-egg-blue: #e7f8fb;
$duck-egg-blue-two: #f9fdfe;
$charcoal-grey: #464547;
$pale-grey: #f6f5f6;
$alto: #e0e0e0;
$leafy-green: #36cf3c;
$leafy-green-light: #53d659;
$mango: #ffa725;
$mango-light: #ffb445;
$dark-peach: #d82e43;
$dark-peach-light: #dd4d5f;
$white: #fff;
$dark-grey-blue: #253a51;
$dark-grey-blue-two: #384a5e;
$dark-grey-blue-three: #516174;

/* main */
$primary: $turquoise-blue;
$primary-hover: $tealish;
$secondary: $white;
$secondary-hover: $duck-egg-blue-two;
$success: $leafy-green;
$success-hover: $leafy-green-light;
$danger: $dark-peach;
$error: $dark-peach-light;
$border: 1px solid $pinkish-grey;
$border-radius: 4px;

/* link */
$link-color: $turquoise-blue;
$link-hover-color: $tealish;

/* tooltip */
$tooltip: $charcoal-grey;

/* row */
$row: $pale-grey;
$row-hover: $duck-egg-blue;
$row-border: $alto;

```

[rafaesc]

Hi @fishkes,

you have to import the variables inside of component, the require generate another bundle

<style lang="scss" scoped>
  @import "../assets/scss/main"

  button {
    padding: 10px 16px;
    border: none;
    color: white;
    border-radius: $border-radius;
    background-color: $primary;
  }
</style>

[fishkes]

I know that importing it in my component will work, but I don't just use it for the styleguide, I use these components in an app which already imports main.scss in main.js.

I would really like to avoid having to import the variables file in every single component.

[rafaesc]

I understand you, maybe you can use dangerouslyUpdateWebpackConfig to manipulate the main entry.

I have to review it.

[nono0481]

Hello, i have a similar issue, i'm trying to load a .scss file in require attribute.

I have no error, but my .scss file is not applied on generated documentation.
I'm using a nuxt application and this is my styleguide.config.js file :

const path = require("path");
const rules = require('vue-webpack-loaders');
//Add scss loader
rules.push({
    test: /\.scss$/,
    loaders: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
});
module.exports = {
    require: [
        path.join(__dirname, "docs/styleguide.helper.js"),
        path.join(__dirname, "assets/scss/ofi.scss")
    ],
    webpackConfig: {
        resolve: {
            extensions: ['.js', '.json', '.vue', '.ts', '.scss'],
            alias: {
                '~': path.join(__dirname, './'),
                '@': path.join(__dirname, './'),
            },
        },
        module: {
            rules
        },
    },
};

Can anyone help me please.

[patric-eberle]

Same problem here. It seems like the sass-resources-loader is able to load additional styles. Probably not best practice, since it's purpose its mainly to import variables, functions and mixin.

[rafaesc]

Ok,

I have added a new example with-sass-loader

must add this lines in the vue-loader options
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/examples/with-sass-loader/styleguide.config.js#L17-L30

If you use vueLoaderConfig default of vue webpack template, add your global styles paths like the example.

You can read some alternatives here.

Regards!

[patric-eberle]

For future visitors:

The final solution will only work for variables. If you use this approach for global styles (eg. styling html, body), this would load the style anew for each component.
In Vue itself you can just import "style.scss" in your main.js (if webpack is configured to handle *.scss files). Styleguidist did ignore this. After some struggle I found the required section in the configuration documentation where you can also import *.scss files to the Styleguidist to add global styles: https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Configuration.md#require