前提・実現したいこと
.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などは勉強不足で全く理解できていないです。
ターミナルの使い方も不安です。
補足情報
- エディター:VSCODE
- 拡張機能:CSScomb
DartJS Sass Compiler and Sass Watcher
scssのコンパイルは拡張機能で行っています。
以前から閉じタグの数が合わないと同じ内容のエラーが出ていました。
あなたの回答
tips
プレビュー