質問するログイン新規登録

Q&A

0回答

3971閲覧

【VSCODE】@useを使用したscssファイルで「CSScomb」を動作させたい

退会済みユーザー

退会済みユーザー

総合スコア0

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2021/08/20 06:17

編集2021/08/20 07:03

0

0

前提・実現したいこと

.scssファイルで「CSScomb」を動作させたいです。

以前はscssファイルでも動作していましたが、@importが非推奨になると聞き、@useと@forwardを使用したら
動作しなくなりました。

下記のf.という部分を無くし、以前のような書き方をしたら動作します。

@use "../foundation"as f; @include f.mixin;

CSScombの設定

setting.jsonの設定 "csscomb.preset": "~/.vscode/csscomb.json", "csscomb.formatOnSave": true, "csscomb.syntaxAssociations": { "postcss": "scss" }, csscomb.jsonの設定 { "always-semicolon": true, "block-indent": " ", "color-case": "lower", "color-shorthand": true, "element-case": "lower", "leading-zero": false, "quotes": "double", "space-before-colon": "", "space-after-colon": " ", "space-before-combinator": " ", "space-after-combinator": " ", "space-between-declarations": "\n", "space-before-opening-brace": " ", "space-after-opening-brace": "\n", "space-after-selector-delimiter": " ", "space-before-selector-delimiter": " ", "space-before-closing-brace": "\n", "tab-size": true, "unitless-zero": true, "vendor-prefix-align": true, "sort-order": [ [ "$variable", "$import", "$extend", "display", "flex", "flex-grow", "flex-shrink", "flex-basis", "flex-flow", "flex-direction", "flex-wrap", "justify-content", "align-content", "align-items", "align-self", "order", "visibility", "opacity", "clip ", "clip-path", "list-style", "list-style-type", "list-style-position", "list-style-image", "position", "top", "right", "bottom", "left", "z-index", "float", "clear", "transform", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "overflow", "overflow-x", "overflow-y", "border", "border-top", "border-right", "border-bottom", "border-left", "border-width", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "box-sizing", "box-shadow", "background", "background-image", "background-position", "background-size", "background-repeat", "background-origin", "background-clip", "background-attachment", "background-color", "color", "font", "font-style", "font-variant", "font-weight", "font-stretch", "font-size", "line-height", "font-family", "letter-spacing", "text-decoration", "text-decoration-color", "text-decoration-style", "text-decoration-line", "text-align", "text-indent", "text-transform", "white-space", "word-break", "word-spacing", "word-wrap", "text-shadow", "table-layout", "border-collapse", "border-spacing", "empty-cells", "caption-side", "vertical-align", "content", "quotes", "counter-increment", "counter-reset", "outline", "outline-color", "outline-style", "outline-width", "cursor", "resize", "transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay", "animation", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-fill-mode", "animation-play-state", "unicode-bidi", "direction", "page-break-before", "page-break-after", "page-break-inside", "widows", "orphans" ] ] }

発生している問題・エラーメッセージ

[CSSComb] Error: Cannot find module '../package.json' Require stack: - /Users/ユーザー/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.2/csscomb.js/lib/core.js - /Users/ユーザー/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.2/csscomb.js/lib/csscomb.js - /Users/ユーザー/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.2/out/services/csscomb.js - /Users/ユーザー/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.2/out/providers/base.js - /Users/ユーザー/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.2/out/providers/styles.js - /Users/ユーザー/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.2/out/extension.js - /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js - /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js - /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js

試したこと

npm initでpackage.jsonをインストールしました。

###自分の実力
npmやnude.jsなどは勉強不足で全く理解できていないです。
ターミナルの使い方も不安です。

補足情報

scssのコンパイルは拡張機能で行っています。

以前から閉じタグの数が合わないと同じ内容のエラーが出ていました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

この質問の投稿者はすでに退会しているため、質問者からの返信やベストアンサーの選定がない点にご留意ください。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.25%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問