web-dev-qa-db-ja.com

vue.js：すべてのvueスタイルセクションにsettings.scssファイルを常にロードします

変数などを使用するために、すべての.vueファイルでこの同じパターンを繰り返していることに気付きました。

<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
</style>

または、フォルダにネストされている場合は、パスに注意する必要があります：

<style lang="scss">
  @import "../../styles/settings.scss";

</style>

私が作成するすべての.vueファイルにそのsettings.scssファイルをグローバルにインポートする方法はありますか？私はドキュメントを見ましたが見ませんでしたが、見逃したかもしれませんか、またはこれはwebpackを活用するために必要なものですか？

sasswebpackvue.jsvue-loader
19
Drew

この質問をしてから公式ドキュメントが更新されました： https://vue-loader.vuejs.org/en/configurations/pre-processors.html

2017年以降にこれを見る人は、「グローバル設定ファイルの読み込み」の手順をご覧ください。

8
Drew

私はしばらくの間、同じ質問に苦労してきました。しかし、本当に簡単な修正があります。この機能は、node-sass自体を通じて提供されます。

そのため、パス内の_globals.scss_などのファイルでscssグローバルを宣言できます。

_/src/scss/globals.scss
_

これで、_vue-loader_設定を簡単に編集できます。

_loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";'
}
_

そして出来上がり！すべてのvueコンポーネントでscssグローバルを使用できます。お役に立てば幸いです！

更新：

Vueの新しいリリースでは、多くの設定が更新されています。したがって、最新のvueプロジェクトでは、上記の変更は些細なように見えるかもしれません。

ショートバージョン：

メソッドを含む_build/utils.js_を見つけます（ほとんどの場合、cssLoaders()という名前です）。このメソッドは、次のようなオブジェクトを返します。

_return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
   ...
  }
_

_scss/sass_固有の行を次のように変更するだけです。

_ return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";']),
   ...
  }
_

ロングバージョン：

_webpack.base.conf.js_には_vue-loader_が含まれています。次のようになります。

_    ...    
    {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        },
    ...
_

vueLoaderConfig変数は、このオブジェクトと等しい_vue-loader.conf.js_ファイルからインポートされます。

_    {
      loaders: utils.cssLoaders( Obj ),  // actual settings coming from cssLoader method of build/utils.js
      transformToRequire: {
       //some key value pairs would be here
      }
    }
_

_build/utils.js_ファイルには、...を返すcssLoaders()メソッドがあります。

_     return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }
_

次のように、更新されたscss構成で上記のコードを更新するだけです。

_       ...
        {
           ...
            scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']),
           ...
         }
        ...
_

したがって、_src/assets/scss/main.scss_ファイルに記述された変数/ミックスインは、すべてのコンポーネントで使用できます。

13
Anish K.

あなたはwebpackを使用していると思いますか？ app.jsファイルに次のようなsettings.scssファイルを要求できます。

require("!style!css!sass!./file.scss");

したがって、コンパイルされたとき。すべてのコンポーネントが取得します。それらのそれぞれにそれを要求する必要はありません。

11
highFlyingSmurfs

Vue webpackテンプレートを使用する場合は、_build/utils.js_の1行のコードで修正できます：scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])

次に、_src/assets/styles/app_で、すべての@importsとvoilàを追加します！

7
Joan Mira

ファイルをグローバルにインポートできるとは思わない。私はおそらくとにかくこれをしないだろう、それは十分に明確ではありません。誰かがそのコンポーネントを別のプロジェクトに移動したい場合、noはそのファイルに依存していると考えます。

ただし、パス管理をはるかに簡単にすることができます。これをwebpack設定ファイルに追加できます...

sassLoader: {
  includePaths: [
    path.resolve(__dirname, './sass')
  ]
},

その後、プロジェクトルート/sassディレクトリをパスを気にせずに自由に。

4
Bill Criswell

Vue CLIを使用している場合は、 https://cli.vuejs.org/guide/css.html#css-modules をお読みください。例：

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

これは私のために完全に修正しました。

4
Edgar Quintero

すべてのコンポーネントを同じディレクトリに保存する場合、settings.scssへのパスは常に同じままです。

これはwebpackの望ましい機能です。原則は、グローバルをできるだけ少なくし、必要なもののみを含めて、プロジェクトを無駄のない、効率的で、推論しやすいものにすることです。

おそらく、各Vueコンポーネント（独自のブートストラップを作成しますか？）すべてのVueコンポーネント内のスタイルシート。

これは本当にあなたの質問に答えるわけではありませんが、それはあなたが一緒に働くことを選んだツールの背後にある原則に合わせることにあなたを導くかもしれません。

幸運を祈ります！

3
Jared Reich

そこにいた-残念ながら、各コンポーネントにファイルをインポートせずにこれを行う方法はありません。これを回避するには、ユースケースの一部をカバーするcolor: $some-variableおよびbackground-color: $some-variableを使用してヘルパークラスを作成してみてください。

各ファイルをインポートする場合は、必ず変数のみが含まれるようにしてください。スタイルルールを複数回含める必要はありません。

それ以外の場合は、コンポーネントごとに個別の.scssファイルを作成します。 htmlとjsには引き続き.vueテンプレートを使用できますが、スタイルは別にしてください。これがおそらく最も効率的な方法です。

1
Jeff

私の解決策はsettings.scssファイルのフォルダーはwebpackのエイリアス、

多分 settings.scssはグローバルなニーズではありません。多分あなたは同様のsetting2.scssファイルも必要ですが、settings.scssはsetting2.scssと競合します。この場合、ファイルの導入のみを選択できます。

このようなwebpack設定：

resolve: {
  alias: {
    '~src': path.resolve(__dirname, '../src'),
    '~styles': path.resolve(__dirname, '../src/styles'),
}

そのため、settings.scssコンポーネント内

<style lang="scss">
   @import "~styles/settings.scss";
</style>
0
Surmon