vue-cli (webpack) はグローバル Sass または Less スタイルを自動的に挿入します

vue プロジェクトでは、*.css のようにプロジェクトエントリ main.js で Sass/Less スタイルを直接インポートすることはできません。では、Sass/Less グローバルスタイルをインポートするにはどうすればよいでしょうか。

まず、問題を解決するための方向性を見つけ、その原理を理解する必要があります。プロジェクト全体が vue-cli を使用してビルドされ、webpack を介して vue-cli パッケージファイルが作成されていることはわかっています。webpack は、単一のファイルコンポーネント (SFC、単純なファイルコンポーネント) を読み取り、そのコンポーネントを対応するローダーに送信してコンパイルおよび変換します。

以下の図に示すように、webpack は SFC を読み取った後、まずそれを vue-loader に渡して SFC コードを変換します。SFC ファイルに Sass/Less が含まれている場合、webpack は SFC スタイルも Sass-loader に渡します。または Less-loader スタイルを CSS コードに変換します。

他の Sass/Less スタイルが SFC の style タグにインポートされていない場合、webpack は解析に他のスタイルローダーを使用しません。外部スタイルをインポートせずに、SFC で外部スタイル変数などの他のスタイルを使用すると、webpack はパッケージ化時にエラーを報告します。

では、変換時に webpack に通知するメカニズムはありますか。他のファイルを取り込んで変換プロセスに参加させることはできますか?

Scaffolding vue-cliの公式 Web サイトを開いて CSS 設定の列を見つけると、vue-cli で構築されたプロジェクトにグローバルスタイルをインポートする方法が記載されていることがわかります。

vue-cli でビルドされたプロジェクトでは、vue.config.js を設定して、どのファイルが変換に関係するかを webpack に伝える必要があります。サンプルコードは次のとおりです。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // ~@/ 是 src/ 的别名，属于webpack的知识
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`, // or @import url("~@/variables.sass")
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";` // 在``内可配置多个样式，注意别少了“;”
      }
    }
  }
}

この設定後、すべての SFC が style タグにインポートされるため、ファイルごとに外部スタイルを手動で何度もインポートしなくても、快適に使用できるようになります。

// SFC 样式
<style>
@import "~@/variables.sass";
@import "~@/variables.scss";

.sfc{}
</style>

vue-cli (webpack) はグローバル Sass または Less スタイルを自動的に挿入します

おすすめ