Question

在一个应用中，我正在使用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"]
            }
        })
        // [...]

});

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

<!--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

我在做什么错了？

Answer 1

问题在于尚未定义变量$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文件并解析其中的所有导入。

browserify / vueify：在所有组件中注入全局scss文件

1 个答案: