我正在使用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]')
}
}
]
}
}
}
答案 0 :(得分:0)
您可以尝试使用
require: [path.join(__dirname, 'src/assets/scss/main.scss')],
require: [path.join(__dirname, 'src/assets/scss/_variables.scss')]
如果您定义了变量文件的路径,则可以尝试在docs服务器中使用。