browserify / vueify: внедрить глобальный файл scss во все компоненты - PullRequest
Новая
       30

browserify / vueify: внедрить глобальный файл scss во все компоненты

0 голосов
/ 19 февраля 2019

В приложении я использую browserify и vueify .Я пытаюсь внедрить глобальный файл scss (с переменными, миксинами, цветами и т. Д.) В Vue, чтобы сделать его доступным для всех компонентов (вместо того, чтобы файл явно импортировался в каждый компонент).

У меня естьследующий main.scss по пути public / app / styles / 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"]
            }
        })
        // [...]

});

Это приложение.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

Что я делаю не так?

1 Ответ

0 голосов
/ 19 февраля 2019

Проблема в том, что ваша переменная $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 напрямую и разрешать все операции импорта в пределах.

...