コンピューターの小型化はますます進んでおり、体内に組み込む生体適応性センサーシステムのような小型のマイクロエレクトロニクス端末に電力を供給するためのバッテリーも開発されています。新たに研究チームが発表した世界最小のバッテリーは、塩1粒程度の超小型サイズとなっています。
⇧ 想像を絶するミクロな世界、思わず「ミクロキッズ（監督：ジョー・ジョンストン）」を思い出してしまったけど、科学の進化はとどまる事を知らないと言えますかね。
SCSSとは？
Wikipediaさんによりますと、
Sass（サース、英: Syntactically Awesome Style Sheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発したスタイルシート言語である。後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。
Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。
⇧ まず、Saasという CSS（Cascading Style Sheets）として解釈される2種類で構成されたスクリプト言語があり、
SASSは伝統的なプログラミング言語、特にオブジェクト指向言語で利用可能ないくつかの仕組みで、CSS3にはないものを提供することでCSSを拡張している。 SassScript の解釈時には、Sass ファイルで定義された様々なセレクタとして、CSSルールのブロックが作成される。 Sass インタプリタが SassScript をCSSに変換する。sass か scss の保存時に Sass がこれらを監視し、CSS出力変換を行っている。
⇧ 2種類の構文の内の1つが「SCSS」ってことらしく、ファイルの「拡張子」も「.scss」となるということかと。
⇧ Saasを構成してるプログラミング言語が様々なのですが、
Sassにはベースとなる言語によって種類があり、その中でも公式が今後推奨していくと明言しているのが「Dart Sass」です。
⇧ なんか、将来的には、「Dart Saas」推しになるそうです。
共通のSCSSファイルはvue.config.jsで読み込むようにすれば良いらしい
で、そんな「.scss」ファイルですが、共通化したファイルを読み込ませたいことあるあるだと思うのですが、Vue.jsのコンセプトとしては、「単一ファイルコンポーネント（SFC：Single-File Components）」って概念を推してるので、共通化とは真逆のベクトルになっておりますと。
でも、Vue.jsでも共通化したSCSSファイルを各ファイルで読み込ませたいけど、できるのか？
調べたところ、
⇧ できるみたいです。
そのためには、「vue.config.js」に設定すれば良いですと。
で、設定したら、エラー出るというね...
⇧ なんか、prettierの設定が原因らしい、「Vue CLI」でVue.jsのプロジェクト作成する際に良しなに調整してくれないんか～い！っていうツッコミたくなりますな。
■.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
},
};
⇧と追記して保存。
そしたらば、共通で読み込みたいSCSSファイルを作成します。
■src\assets\common\scss\color.scss
/* 共通CSS【色】 */
.bule {
color: #134ae0cc;
}
■src\assets\common\scss\feature.scss
/* 共通CSS【機能】 */
.yellow {
background-color: #f0da1b;
}
そしたらば、以下のh1タグにクラスを追加。
■src\components\HelloWorld.vue
<template>
<div class="hello">
<h1 class="bule yellow">{{ msg }}</h1>
<p>
...省略
共通のSCSSファイルを読み込むように「vue.config.js」に追記。
■vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `
@use "@/assets/common/scss/color.scss";
@use "@/assets/common/scss/feature.scss";
`,
},
},
},
};
⇧ で保存し、Vue.jsプロジェクトに同梱されてる開発用サーバーを起動。
で、ブラウザでアクセスしたところ、共通のSCSSファイルの内容が反映されてました。
ただ、共通化すると、HTMLタグのclassやidの名前がバッティングしないように気を付ける必要がありますかね。
毎度モヤモヤ感が半端ない...
今回はこのへんで。
