独自の変数を持つすべてのVueコンポーネントでCSSフレームワークを使用

Question

私はVueJSとWebpackの世界ではかなり新しいので、何か助けが必要です。

私は

vue init webpack my-project 

コマンドでコンソールを介したVueJSとWebpackをインストールしたし、この後、私はこのディレクトリにbulma CSS Frameworkをインストールしました。

npm install bulma 

と私はvariables.scssにいくつかのbulmaの変数を上書きしてきました。両方のファイルを私のApp.vueのスタイルセクションにインポートすると問題なく動作します。

マイApp.vueは次のようになります。

<template> 
    <div id="app"> 
    <top-navigation/> 
    <div class="has-text-centered"> 
     <img src="./assets/logo.png"> 
     <p>Test</p> 
     <router-view></router-view> 
    </div> 

    </div> 
</template> 

<script> 
    import TopNavigation from './components/shared/TopNavigation.vue' 

    export default { 
    name: 'app', 
    components: { 
     'top-navigation': TopNavigation 
    } 
    } 
</script> 

<style lang="scss"> 
    @import 'assets/scss/_variables.scss'; 
    @import '~bulma'; 

</style> 

マイTopNavigation.vueは次のようになります。

<template> 
    <div> 
    <div class="blue-bg"> 
     <div class="container"> 
     <h2 class="title">Test</h2> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 

    export default { 
    data() { 
     return { 
     msg: 'hello vue' 
     } 
    } 
    } 
</script> 

<style lang="scss"> 
    .blue-bg { 
    height: 80px; 
    background-color: $blue; 
    } 
</style> 

しかし、私はエラーを取得する：

error in ./src/components/shared/TopNavigation.vue

Module build failed: background-color: $blue;
Undefined variable: "$blue".

---

私はしばらくの間を検索し、このように私のwebpackutils.jsファイルに直接ファイルをインポートしようとしました：今、私はエラーを取得しないと私のTopNavigationに使用している

scss: generateLoaders(['css', 'sass?data=@import "./src/assets/scss/_variables.scss";@import "~bulma";']), 

右の青色。しかし今やbulma-variableは無効になりません。

私は皆さんが私の問題を理解し、誰かが私にこれを手伝ってくれることを願っています。

Answer 1

私はあなたがscssを使うことはできません。bulmaはsassを使用しているからです。ただ、あなたにTopNavigation.vueスタイルを変更：

<style lang="sass" scoped> 
    @import '~bulma/sass/utilities/variables.sass' 
    .blue-bg 
    height: 80px; 
    background-color: $blue; 
</style> 

そして、私は、これはトリックを行うべきだと思います。

Answer 2

あなたが私のような新しいものなら、Webpackやものに圧倒されない方がいいです。

私が今行っていることは、bulma.cssをbulmaウェブサイトからダウンロードすることです。

vue-cliを使用して、私にテンプレートプロジェクト構造を作成させてください[今度はwebpackの魔法を無視しました。テンプレートはwebpack-simpleでした。

は、プロジェクト構造の静的フォルダ内の場所にダウンロードしたCSSファイルを追加しましたし、フォーカスが学び、開発し、より高度なものを学習に入るためにある私のApp.vue

<style src="../static/bulma.css"> 

でそれを参照しましたビルドツールのウェブパックなどのように。