vue が sass グローバル変数を導入する方法の分析

この記事では、vue がどのように Sass グローバル変数を導入するかについての分析を主に紹介します。これには、必要な友達がそれを参照できるようになっています。

両方とも変数設定を提供します。この記事では主に Vue での Sass グローバル変数の導入について紹介します。興味のある方は参照してください。ただし、プロジェクト内で less または sass 変数を使用する場合、変数値を変更する限り、その変数を使用するすべてのスタイルはコンパイル後に希望する効果に変更されます。 、vue-cli で構築されたプロジェクトで、main.js scss ファイルにグローバルを導入すると、変数が他のコンポーネントまたはページで定義および参照される場合、未定義の変数エラーが報告されますが、他のスタイルは正常に表示されます。コンパイルの問題。

愚かなリファレンス

グローバル変数を使用するすべてのコンポーネントにグローバルスタイルファイルを導入してください

@import 'path/fileName.scss'

しかし、コンポーネントまたはページは統合されたディレクトリになく、インポートされたパスも異なる可能性があります。それでは、 sass-resources-loader の解決策を見てみましょう。

sass-resources-loader 的解决方法吧。

sass-resources-loader引入sass全局变量

sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以，可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。

安装sass-resources-loader

npm install --save-dev sass-resources-loader

修改sass配置

在 build 文件夹下找到 util.js 修改sass编译器loader的配置

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('common.scss')] 
   }
  }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

修改sass配置的调用为 generateSassResourceLoader()

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli默认sass配置
  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // 新引入的sass-resources-loader
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

在 main.js 中引用 common.scss sass-resources-loader は sass グローバル変数を導入します

sass-resources-loader は、アクセスする必要がある任意の sass モジュールから sass リソースにアクセスできます。そのため、共有変数を使用して、すべてのファイルで参照することなく、すべての SASS スタイルを混合できます。

sass-resources-loaderをインストールします

rrreee

sass設定を変更します

build フォルダーでutil.js を見つけて、sassコンパイラーローダーを変更します

rrreee

の設定は、sass設定の呼び出しをgenerateSassResourceLoader()🎜🎜🎜rrreee🎜🎜🎜に変更し、 main.js に共通するを参照します。 >.scss ファイルを開き、サービスを再起動すると、その中で定義された変数が他のコンポーネントで使用できるようになります。 🎜🎜🎜上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 🎜🎜関連する推奨事項: 🎜🎜🎜vue が Element コンポーネントを使用する場合の v-for ループでのフォーム項目の検証方法について🎜🎜🎜🎜🎜HBulider を使用してネイティブ APP をパッケージ化する Vue Web アプリ プロジェクトの紹介🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上がvue が sass グローバル変数を導入する方法の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。