web-dev-qa-db-ja.com

VueJSコンポーネントでのsass変数の使用

変数を使用する必要があるVueJSコンポーネントでかなり単純な問題が発生しました。問題は、sassにコンポーネント内の変数を登録させることです。

変数を含む_variables.scssファイルをインポートしようとしましたが、うまくいきませんでした。この時点で、ガイダンスは非常に高く評価されています。または、コンポーネントがスタイルを継承する別の方法がある場合。

MyComponent.vue

<template>
    <div class="my-color"></div>
</template>
<style lang="sass">
    .my-color {
        color: $primary-color;
    }
</style>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

Gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
    mix.sass('app.scss');
});

app.scss

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "modules/variables";

variables.scss

$primary-color: #BA2731; //Red
laravelsassvue.jslaravel-elixir
12
Nicklas Kevin Frank

すべてのコンポーネントに_variables.scssをインポートすることが、これまでに見つけた唯一の解決策のようです（ この問題によれば、動作するはずです ）。

<template>
    <div class="my-color"></div>
</template>
<style lang="sass">
    @import 'path/to/your/_variable.scss'; // Using this should get you the variables
    .my-color {
        color: $primary-color;
    }
</style>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

変数のみを含めるので、これは問題になりません。

ただし、問題で述べたように、注意点：具体的なCSSルールではなく、抽象エンティティ（変数、拡張、ミックスイン）をすべてのコンポーネントに含める必要があります。

16
nils

vue-cli を使用していると仮定して、これを試してください。

Sassローダーをまだインストールしていない場合：

npm install -D sass-loader node-sass

次にvue.config.js：

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/pathto/variables.scss";`
      }
    }
  }
};

あなたのコンポーネントで：

<style lang="sass">
    .my-color {
        color: $primary-color;
    }
</style>

ソース：

プリプロセッサローダーにオプションを渡す

すべてのvueコンポーネント）にsassファイルをインポートする方法

8
user2718281

私のプロジェクトでは Vue CLI webpack を使用しましたが、これが私のために働いたソリューションです。

SCSSはすべてApp.vueファイルで管理しています。それぞれのComponent.vueで<style></style>の使用をやめ、別のcomponent.scssの作成を開始しました。

したがって、私のsrcフォルダは次のようになります。

 /src
     /assets
     /components
         /compA
             CompA.vue
             compA.scss
         /compB
             CompB.vue
             compB.scss
    App.vue
    main.js

そして、私のApp.vueは

<template> ... </template>

<script> ... </script>

<style lang="less">
    //Bootstrap
    @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    //Components
    @import "components/compA.scss";
    @import "components/compB.scss";
</style>

このセットアップの利点は、すべてのスタイルを1つの場所で管理できることと、すべてのbootstrap変数とミックスインを使用できることです。

Boostrap SCSSをすべてのコンポーネントにインポートすると、アプリのサイズが大きくなり続けたため、この方法を採用しました。変数のみをインポートしている場合、この増加は無視できますが、Boostrap SCSS全体をインポートすると、増加が大きくなります。これを行うのは、ミックスインを使用し、いくつかの既存のスタイルを拡張できるようにするためです。

0
Gene Parcellano