使用 vue-styleguidist 时无法加载全局 scss答案

【问题标题】：Unable to load global scss when using vue-styleguidist使用 vue-styleguidist 时无法加载全局 scss
【发布时间】：2018-09-10 21:31:10
【问题描述】：

我正在使用vue-styleguidist 为我的 vue 应用程序生成样式指南，它是使用 vue-cli 的 webpack 模板生成的。

我有一个_variables.scss 文件，我想在启动样式指南服务器时全局加载它。

因此，在recommendation on the docs 之后，我将require: [path.join(__dirname, 'src/assets/scss/main.scss')] 添加到了我的styleguide.conf 文件中，但它没有帮助，当我在我的一个组件样式标签中使用变量时，我得到一个错误：

未定义变量：“$border-radius”。

这是我的完整 styleguide.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]')
          }
        }
      ]
    }
  }
}

【问题讨论】：

您找到解决问题的方法了吗？我对全局样式有同样的问题
很遗憾，没有，我也在他们的论坛上问过，据我所知，目前没有办法。
但是我使用了这个代码require: [path.join(__dirname, 'src/assets/scss/main.scss')]，它对我有用。但我在我的文件中全局连接字体。我里面有变量。

标签： webpack vue.js vue-styleguidist

【解决方案1】：

你可以试试

require: [path.join(__dirname, 'src/assets/scss/main.scss')],
require: [path.join(__dirname, 'src/assets/scss/_variables.scss')]

如果您定义了变量文件的路径，您可以尝试在文档服务器中使用。

【讨论】：