0

在一个应用程序中，我使用browserify和vueify。我正在尝试将全局 scss 文件（带有变量、mixins、颜色等）注入 Vue 以使其可用于所有组件（而不是在每个组件中显式导入文件）。

我在路径 public/app/styles/main.scss 有以下 main.scss：

// public/app/styles/main.scss

// Helpers
@import "helpers/mixins";
@import "helpers/variables";
@import "helpers/colors";


// Base
@import "base/reset";
@import "base/typography";
@import "base/base";


// Layout
@import "base/layout";

在 gulp.js 文件中，我有以下内容：

// gulp.js

gulp.task("build_js", () => {

    return browserify({
        entries: config.app.index,
        cache: {},
        dev: true
    })
        // [...]
        .transform(vueify, {
            sass: {
                includePaths: ["public/app/styles", "public/app/styles/main.scss"]
            }
        })
        // [...]

});

这是我尝试使用全局定义的 scss 变量的 App.vue 组件：

<!--App.vue-->

<template>

    <div id="app"></div>

</template>

<script>

    export default {

        name: "App"

    }

</script>

<style scoped lang="scss">

    #app {
        width: 100%;
        height: 100%;
        background-color: $backgroundColor;        
    }

</style>

但我收到以下错误：

Error: Undefined variable: "$backgroundColor". while parsing file: D:\Users\revy\Documents\myapp\public\app\components\App.vue

我究竟做错了什么？

4

1 回答 1

0

问题是您的变量$backgroundColor尚未定义。最有可能的是，定义它的文件尚未捆绑。

您可以通过main.scss在组件样式块中导入文件来解决这个问题，它应该得到解决。

<!--App.vue-->

<template>

    <div id="app"></div>

</template>

<script>

    export default {

        name: "App"

    }

</script>

<style lang="scss" src="public/app/styles/main.scss"></style>
<style scoped lang="scss">

    @import "public/app/style/main.scss";

    #app {
        width: 100%;
        height: 100%;
        background-color: $backgroundColor;        
    }

</style>

您可能必须更改路径，因为我不确定您的文件结构是什么样的。

但是，如果导入不起作用，您可以尝试使用style带有src属性的标签直接从组件中包含文件：

<!--App.vue-->

<template>

    <div id="app"></div>

</template>

<script>

    export default {

        name: "App"

    }

</script>

<style lang="scss" src="public/app/styles/main.scss"></style>
<style scoped lang="scss">

    #app {
        width: 100%;
        height: 100%;
        background-color: $backgroundColor;        
    }

</style>

使用此语法，捆绑器将直接加载 SCSS 文件并解析其中的所有导入。

于 2019-02-19T11:19:13.587 回答