Closed hi85gh closed 5 years ago
Sass への依存をなくし PostCSS に移行しました。 プラグインとしてパッケージを追加してはいませんが、 Nuxt.js でデフォルトサポートしていた postcss-import の機能を利用しています。 ( layouts/*.vue から assets/css/common.css の読み込みで利用)
postcss-import
layouts/*.vue
assets/css/common.css
assets/css/admin.scss の変数はすべて assets/css/common.css の :root に移動しています。 名前の変換ルールは以下の通りです。
assets/css/admin.scss
:root
Sass : $VARIABLES_NAME → CSS : --variables-name
$VARIABLES_NAME
--variables-name
また、 .vue 内に記述されていた以下の Sass の変数も移動しています。
.vue
// components/molecules/CommitBoard.vue $COMMENT_CIRCLE_SIZE: 32px; $COMMIT_MAKER_HEIGHT: 102px; $COMMIT_GRAPH_LEFT: 35px; // components/molecules/Members.vue $OPEN_ICON_HEIGHT: 50px; // components/organisms/FileView.vue $TOP_BAR_HEIGHT: 70px; $VIEWER_WIDTH: 650px; $COMMIT_MAKER_HEIGHT: 60px; // components/organisms/FolderView.vue $HERDER_HEIGHT: 100px; $PADDING: 30px; $ITEM_HEIGHT: 40px; // components/organisms/UploadDialog.vue $DROP_COLOR: #409eff; $DROP_PADDING: 80px;
Sass のネストは先祖のセレクタを構造通りにすべて記載する形で手動展開しています。 ネストを多用しそうであれば postcss-nesting を追加したいと思います。
postcss-nesting
Sass と CSS で指定方法が異なるため変更しています。 components/organisms/FolderView.vue でシンタックスエラーとなるため先頭に .dialog を追加しています。
components/organisms/FolderView.vue
.dialog
- /deep/ .v-modal, - /deep/ .el-dialog__wrapper { - top: $TITLEBAR_HEIGHT; + .dialog >>> .v-modal, + .dialog >>> .el-dialog__wrapper { + top: var(--titlebar-height);
47 の対応
Sass への依存をなくし PostCSS に移行しました。
プラグインとしてパッケージを追加してはいませんが、 Nuxt.js でデフォルトサポートしていた
postcss-import
の機能を利用しています。(
layouts/*.vue
からassets/css/common.css
の読み込みで利用)1. Sass の変数を CSS Custom Properties に置き換え
assets/css/admin.scss
の変数はすべてassets/css/common.css
の:root
に移動しています。名前の変換ルールは以下の通りです。
Sass :
$VARIABLES_NAME
→ CSS :--variables-name
また、
.vue
内に記述されていた以下の Sass の変数も移動しています。2. ネストの展開
Sass のネストは先祖のセレクタを構造通りにすべて記載する形で手動展開しています。
ネストを多用しそうであれば
postcss-nesting
を追加したいと思います。3. Deep Selectors の変換
Sass と CSS で指定方法が異なるため変更しています。
components/organisms/FolderView.vue
でシンタックスエラーとなるため先頭に.dialog
を追加しています。