Skip to content

Commit

Permalink
build: ➕ set up scss env
Browse files Browse the repository at this point in the history 
add dependency and set up stylelint config
  • Loading branch information
@kawa-work
kawa-work committed May 1, 2022
1 parent a7a7035 commit ef95c87
Show file tree
Hide file tree
Showing 4 changed files with 807 additions and 31 deletions.
1 change: 1 addition & 0 deletions nuxt.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export default {
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/stylelint
'@nuxtjs/stylelint-module',
'@nuxt/postcss8',
],

// Modules: https://go.nuxtjs.dev/config-modules
Expand Down
8 changes: 8 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@babel/eslint-parser": "^7.16.3",
"@commitlint/cli": "^15.0.0",
"@commitlint/config-conventional": "^15.0.0",
"@nuxt/postcss8": "^1.1.3",
"@nuxt/types": "^2.15.8",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/eslint-config-typescript": "^8.0.0",
Expand All @@ -52,12 +53,19 @@
"husky": "^7.0.4",
"jest": "^27.4.4",
"lint-staged": "^12.1.2",
"node-sass": "^7.0.1",
"postcss": "8",
"postcss-html": "^1.3.0",
"prettier": "^2.5.1",
"sass-loader": "10.1.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-recommended-scss": "^6.0.0",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"stylelint-config-standard-scss": "^3.0.0",
"stylelint-scss": "^4.2.0",
"ts-jest": "^27.1.1",
"vue-jest": "^3.0.4"
}
Expand Down
3 changes: 3 additions & 0 deletions stylelint.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ module.exports = {
customSyntax: 'postcss-html',
extends: [
'stylelint-config-standard',
'stylelint-config-standard-scss',
'stylelint-config-recess-order',
'stylelint-config-recommended-scss',
'stylelint-config-recommended-vue',
'stylelint-config-prettier',
],
Expand Down

1 comment on commit ef95c87

@kawa-work
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nuxt.jsでstylelintの設定をして快適なscss環境を。などに従って環境を設定したが、Errorが連発し30分以上手間取ったので道筋をメモ書き

  • 上記ブログに従うとTypeError: Class extends value undefined is not a constructor or nullのエラーが発生する
  • 調べてみると、stylelint0-config-standard-scssがエラーの原因のようで、当該Githubにissueが建てられている。
  • 上記issueのコメントに従ってyarn add -D postcss@8を実行することで、エラーは消えたが、別のWarnが連続して発生した。
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
  • 上記Warnを解消するために以下の記事を参考にbuildModulesに以下のコードを追記

nuxt-modules/storybook#258
https://qiita.com/citrus_candy/items/7a1bcb82f1b0c2936723

 buildModules: [
  ...
  '@nuxt/postcss8'
 ],
  • 最後にsass-loader@12.6.0 is installed but ^10.1.1 is expectedのWarnが残っていたので、依存関係に合うように10.1.1を再インストール

Please sign in to comment.