Separation of Concerns, Change lang to "scss"

README.md

@@ -22,7 +22,7 @@
 - Vuex
 - Storybook
 - template lang="pug"
-- style lang="sass"
+- style lang="scss"
 
 ## How to Develop
 
@@ -50,6 +50,8 @@ $ yarn generate:gh-pages
 ## References
 
 - [Nuxt.js docs](https://ja.nuxtjs.org/)
-- [Vue.js Lifecycle Diagram](https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム)
+- [Vue.js life cycle Diagram](https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム)
 - [Sass: sass:math](https://sass-lang.com/documentation/modules/math)
 - [Pug](https://pugjs.org/api/getting-started.html)
+- [Nuxt TypeScript docs](https://typescript.nuxtjs.org/ja/).
+- [Nuxt Community TypeScript Template](https://github.com/nuxt-community/typescript-template).

nuxt.config.js

@@ -1,29 +1,19 @@
 import Sass from 'sass'
 import Fiber from 'fibers'
 
-const baseDir = process.env.BASE_DIR || '/'
-
-// DEPLOY_ENV が GH_PAGES の場合のみ router.base = '/<repository-name>/' を追加する
-// SEE: https://ja.nuxtjs.org/api/configuration-router/
-// SEE: https://ja.nuxtjs.org/faq/github-pages/
-// SEE: https://nuxtjs.org/api/configuration-builddir
 const routerBase = process.env.BASE_DIR
   ? {
       router: {
-        base: baseDir,
+        base: process.env.BASE_DIR,
       },
       generate: {
-        fallback: true, // '404.html' を使用したい場合
+        fallback: true,
         dir: 'public',
       },
     }
   : {}
 
 export default {
-  mode: 'universal',
-  /*
-   ** Headers of the page
-   */
   head: {
     title: process.env.npm_package_name || '',
     meta: [
@@ -37,74 +27,50 @@ export default {
       },
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: `${baseDir}favicon.ico` },
+      {
+        rel: 'icon',
+        type: 'image/x-icon',
+        href: `${process.env.BASE_DIR || '/'}favicon.ico`,
+      },
       {
         rel: 'stylesheet',
         href:
           'https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap&subset=japanese',
       },
     ],
   },
-  /*
-   ** Customize the progress-bar color
-   */
   loading: { color: '#ddd' },
-  /*
-   ** Global CSS
-   */
-  css: ['@/assets/style/main.sass'],
-  /*
-   ** Plugins to load before mounting the App
-   */
+  css: ['@/assets/style/main.scss'],
   plugins: [],
-  /*
-   ** Nuxt.js dev-modules
-   */
   buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
   ],
-  /*
-   ** Nuxt.js modules
-   */
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
     '@nuxtjs/style-resources',
   ],
   styleResources: {
-    sass: ['./assets/style/_chunk.sass'],
+    scss: ['./assets/style/_chunk.scss'],
   },
-  /*
-   ** Axios module configuration
-   ** See https://axios.nuxtjs.org/options
-   */
   axios: {},
   vue: {
     config: {
       productionTip: false,
       devtools: true,
     },
   },
-  /*
-   ** Serve configuration
-   */
   server: {
     port: 4000, // default: 3000
     host: 'localhost', // default: localhost
   },
   /**
-   * configuration-srcdir
+   * configuration-srcDir
    * DOC: https://ja.nuxtjs.org/api/configuration-srcdir/#__layout
    */
   srcDir: 'src/',
-  /*
-   ** Build configuration
-   */
   build: {
-    /*
-     ** You can extend webpack config here
-     */
     babel: {
       presets({ isServer }) {
         return [

package.json

@@ -5,27 +5,41 @@
   "author": "Tomonari Takai",
   "private": true,
   "scripts": {
-    "predev": "yarn clean",
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "pregenerate:gh-pages": "yarn clean:generate",
-    "generate:gh-pages": "cross-env BASE_DIR=/NuxtBoilerplate/ nuxt generate",
     "generate": "nuxt generate",
+    "generate:gh-pages": "cross-env BASE_DIR=/NuxtBoilerplate/ nuxt generate",
     "lint": "eslint --ext .js,.vue .",
-    "clean:generate": "yarn clean docs",
-    "clean": "rimraf .nuxt dist .out",
+    "lint:fix": "yarn lint --fix",
+    "clean": "rimraf .nuxt dist .out public",
     "test": "jest",
-    "prestorybook": "yarn clean",
     "storybook": "start-storybook -c ./src/.storybook -p 6006",
     "storybook:debug": "yarn storybook --debug-webpack",
     "build-storybook": "build-storybook -c ./src/.storybook -o .out"
   },
+  "lint-staged": {
+    "*.{js,vue}": "eslint --fix"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "post-merge": "yarn clean && yarn install",
+      "post-checkout": "yarn clean && yarn install",
+      "post-rebase": "yarn clean && yarn install",
+      "pre-auto-gc": "yarn clean"
+    }
+  },
+  "browserslist": [
+    "defaults",
+    "not < 1%",
+    "IE 11"
+  ],
   "dependencies": {
     "@nuxtjs/axios": "5.9.7",
     "@nuxtjs/style-resources": "1.0.0",
     "core-js": "3.6.5",
-    "modern-css-reset": "1.1.0",
+    "destyle.css": "^1.0.11",
     "nuxt": "2.12.2",
     "vue-feather-icons": "5.0.0",
     "vue-styled-components": "1.4.14"
@@ -51,7 +65,9 @@
     "eslint-plugin-nuxt": "0.5.2",
     "eslint-plugin-prettier": "3.1.3",
     "fibers": "4.0.2",
+    "husky": "^4.2.5",
     "jest": "25.3.0",
+    "lint-staged": "^10.1.7",
     "node-sass": "4.13.1",
     "prettier": "2.0.4",
     "pug": "2.0.4",
@@ -61,10 +77,5 @@
     "sass-loader": "8.0.2",
     "sass-resources-loader": "2.0.3",
     "vue-jest": "4.0.0-beta.2"
-  },
-  "browserslist": [
-    "defaults",
-    "not < 1%",
-    "IE 11"
-  ]
+  }
 }

src/.storybook/config.js

@@ -1,6 +1,6 @@
 import { configure } from '@storybook/vue';
 
-import '!style-loader!css-loader?sourceMap!sass-loader!../assets/style/main.sass';
+import '!style-loader!css-loader?sourceMap!sass-loader!../assets/style/main.scss';
 
 // automatically import all files ending in *.story.js
 configure(require.context('../components', true, /\.story\.js$/), module);

src/.storybook/webpack.config.js

@@ -1,5 +1,39 @@
 const path = require('path')
 
+const cssLoader = {
+  loader: 'css-loader',
+  options: {
+    sourceMap: true,
+  },
+}
+
+const cssLoaderModule = {
+  loader: 'css-loader',
+  options: {
+    sourceMap: true,
+    modules: {
+      localIdentName: "[local]___[hash:base64:5]",
+    },
+  },
+}
+const sassLoader = {
+  loader: 'sass-loader',
+  options: {
+    sourceMap: true,
+    implementation: require('sass'),
+    sassOptions: {
+      fiber: require('fibers'),
+    },
+  },
+}
+
+const sassResourcesLoader = {
+  loader: 'sass-resources-loader',
+  options: {
+    resources: path.resolve(__dirname, '../assets/style/_chunk.scss')
+  }
+}
+
 // Export a function. Accept the base config as the only param.
 // SEE: https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
 module.exports = async ({ config }) => {
@@ -10,81 +44,28 @@ module.exports = async ({ config }) => {
   // Make whatever fine-grained changes you need
   config.module.rules.push(
     {
-      test: /\.sass$/,
+      test: /\.scss$/,
       oneOf: [
         {
           // this matches `<style lang="sass" module>`
           resourceQuery: /module/,
           use: [
             'vue-style-loader',
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true,
-                modules: {
-                  localIdentName: "[local]___[hash:base64:5]",
-                },
-              },
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                sourceMap: true,
-                implementation: require('sass'),
-                sassOptions: {
-                  indentedSyntax: true,
-                  fiber: require('fibers'),
-                },
-              },
-            },
-            {
-              loader: 'sass-resources-loader',
-              options: {
-                resources: path.resolve(__dirname, '../assets/style/_chunk.sass')
-              }
-            },
+            cssLoaderModule,
+            sassLoader,
+            sassResourcesLoader,
           ],
         },
         {
-          // this matches plain `<style lang="sass">` or `<style lang="sass" scoped>`
           use: [
             'vue-style-loader',
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true,
-              },
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                sourceMap: true,
-                implementation: require('sass'),
-                sassOptions: {
-                  indentedSyntax: true,
-                  fiber: require('fibers'),
-                  // includePaths: [path.resolve(__dirname, '../assets/style/_chunk.sass')]
-                },
-              },
-            },
-            {
-              loader: 'sass-resources-loader',
-              options: {
-                resources: path.resolve(__dirname, '../assets/style/_chunk.sass')
-              }
-            },
+            cssLoader,
+            sassLoader,
+            sassResourcesLoader,
           ],
         },
       ],
     },
-    {
-      test: /\.scss$/,
-      use: [
-        'vue-style-loader',
-        'css-loader',
-        'sass-loader',
-      ],
-    },
     {
       test: /\.css$/,
       sideEffects: true,

src/assets/style/_chunk.scss

@@ -0,0 +1,8 @@
+// global
+// chunk.sass
+// pre-processer can import SCSS
+// vue-style-loader can't import SCSS
+@import "scss/_base.scss";
+@import "scss/_computation.scss";
+@import "scss/_variable.scss";
+@import "scss/_mediaQuery.scss";