dart-sassの@importの記載を@useなどに置き換え

package.json

@@ -12,7 +12,7 @@
     "stylelint": "stylelint --fix '**/*.{scss,css}' --ignore-path .gitignore",
     "lint": "yarn stylelint && yarn eslint",
     "build:develop": "yarn webp && rm -rf dist/ && webpack --config webpack.dev.js",
-    "build": "yarn webp && rm -rf dist/ && webpack --config webpack.prod.js",
+    "build": "rm -rf dist/ && webpack --config webpack.prod.js",
     "deploy": "yarn webp && webpack --config webpack.prod.js && mv ._headers dist/_headers",
     "deploy:master": "yarn webp && webpack --config webpack.prod.js",
     "commit:stylelint": "yarn stylelint",
@@ -65,7 +65,6 @@
     "jest-junit": "^12.2.0",
     "lint-staged": "^11.1.2",
     "mini-css-extract-plugin": "^1.3.5",
-    "node-sass-glob-importer": "^5.3.2",
     "postcss": "^8.3.6",
     "postcss-loader": "^4.1.0",
     "prettier": "^2.3.2",
@@ -81,7 +80,7 @@
     "stylelint-prettier": "^1.2.0",
     "stylelint-scss": "^3.20.1",
     "ts-jest": "^27.0.4",
-    "ts-loader": "^9.2.5",
+    "ts-loader": "^8.0.18",
     "typescript": "^4.3.5",
     "typescript-require": "^0.3.0",
     "webpack": "^4.44.1",

src/assets/scss/foundation/_default.scss

@@ -1,14 +1,14 @@
+@use "../foundation/" as global;
 @use "sass:math";
 html,
 body {
-  background: MixinColorPalette('back');
-  background: #fff;
+  background: global.MixinColorPalette('back');
 }
 
 body {
-  font-family: $FontFamily_Default;
-  font-size: percentage(math.div(16, $FontSize_Default));
-  color: MixinColorPalette(text);
+  font-family: global.$FontFamily_Default;
+  font-size: percentage(math.div(16, global.$FontSize_Default));
+  color: global.MixinColorPalette(text);
   text-rendering: optimizeLegibility;
 }
 

src/assets/scss/foundation/_index.scss

@@ -0,0 +1,2 @@
+@forward 'variables';
+@forward 'mixins';

src/assets/scss/foundation/mixins/_MixinFontSize.scss

@@ -1,6 +1,7 @@
+@use "../../foundation/variables" as variable;
 @use "sass:math";
 @mixin MixinFontSize($fontSize, $lineheight: 'default') {
-  $Mixinfont: math.div($fontSize, $FontSize_Default);
+  $Mixinfont: math.div($fontSize, variable.$FontSize_Default);
   $Mixinlineheigh: 1.6666;
   @if $lineheight == 'default' {
     $Mixinlineheigh: 1.6666;

src/assets/scss/foundation/mixins/_MixinWrapperWidth.scss

@@ -1,3 +1,4 @@
+@use '../../foundation/mixins/mediaquery' as mediaquery;
 @use "sass:math";
 @mixin MixinWrapperWidth($contentwidth, $globalwidth: 1920, $position: center) {
   @if $globalwidth == 'full' {
@@ -15,7 +16,7 @@
   } @else if $position == 'right' {
     margin-left: auto;
   }
-  @include sp-only() {
+  @include mediaquery.sp-only() {
     @if $globalwidth == MixinBreakPoint('MAXPC') or $globalwidth == 'full' {
       width: calc(100% - 40px);
     } @else {

src/assets/scss/foundation/mixins/_index.scss

@@ -0,0 +1,4 @@
+@forward 'mediaquery';
+@forward 'MixinFontSize';
+@forward 'MixinHoverAction';
+@forward 'MixinWrapperWidth';

src/assets/scss/foundation/mixins/_mediaquery.scss

@@ -1,47 +1,48 @@
+@use "../../foundation/variables" as variable;
 // pcの最大幅(1920px)になったら
 @mixin max-pc() {
-  @media screen and (min-width: MixinBreakPoint('MAXPC')) {
+  @media screen and (min-width: variable.MixinBreakPoint('MAXPC')) {
     @content;
   }
 }
 
 // 通常のpc用(1560px以下)
 @mixin normal-pc() {
-  @media screen and (min-width: MixinBreakPoint('PC_CONTENT')) {
+  @media screen and (min-width: variable.MixinBreakPoint('PC_CONTENT')) {
     @content;
   }
 }
 // 通常のpc用(1280px以下)
 @mixin min-pc() {
-  @media screen and (min-width: MixinBreakPoint('PC')) {
+  @media screen and (min-width: variable.MixinBreakPoint('PC')) {
     @content;
   }
 }
 
 // 通常のpcとspの切り替え(pc用)
 @mixin pc-only() {
-  @media screen and (min-width: MixinBreakPoint('TABLET')) {
+  @media screen and (min-width: variable.MixinBreakPoint('TABLET')) {
     @content;
   }
 }
 
 // 通常のpcとspの切り替え(sp用)
 @mixin sp-only() {
-  @media screen and (max-width: MixinBreakPoint('TABLET')) {
+  @media screen and (max-width: variable.MixinBreakPoint('TABLET')) {
     @content;
   }
 }
 
 // スマートフォンのみ別で対応したい場合(767px以下)
 @mixin min-sp() {
-  @media screen and (max-width: MixinBreakPoint('SMARTPHONE')) {
+  @media screen and (max-width: variable.MixinBreakPoint('SMARTPHONE')) {
     @content;
   }
 }
 
 // iphone5のみ別で対応したい場合
 @mixin iphone5() {
-  @media screen and (max-width: MixinBreakPoint('SMALL')) {
+  @media screen and (max-width: variable.MixinBreakPoint('SMALL')) {
     @content;
   }
 }

src/assets/scss/foundation/variables/_index.scss

@@ -0,0 +1,4 @@
+@forward 'breakpoint';
+@forward 'color';
+@forward 'font';
+@forward 'zindex';

src/assets/scss/layout/_footer.scss

@@ -1,3 +1,4 @@
+@use "../foundation/" as global;
 small {
-  color: MixinColorPalette('text', 'footer');
+  color: global.MixinColorPalette('text', 'footer');
 }

src/assets/scss/layout/_header.scss

@@ -1,8 +1,9 @@
+@use "../foundation/" as global;
 .l-header {
   width: calc(100% - 40px);
   margin: 0 auto;
 }
 
 .l-header__Title {
-  color: MixinColorPalette(text);
+  color: global.MixinColorPalette(text);
 }

src/assets/scss/layout/_index.scss

@@ -0,0 +1,2 @@
+@forward 'header';
+@forward 'footer';

src/assets/scss/object/_index.scss

@@ -0,0 +1,3 @@
+@forward 'components';
+@forward 'project';
+@forward 'utility';

src/assets/scss/object/components/_index.scss

@@ -0,0 +1 @@
+@forward 'text';

src/assets/scss/object/components/_text.scss

@@ -1,3 +1,4 @@
+@use "../../foundation/" as global;
 .c-text {
-  @include MixinFontSize(15);
+  @include global.MixinFontSize(15);
 }

src/assets/scss/object/project/_index.scss

@@ -0,0 +1 @@
+@forward 'top';

src/assets/scss/object/project/_top.scss

@@ -1,9 +1,10 @@
+@use "../../foundation/" as global;
 .p-top {
-  z-index: zIndex('header');
+  z-index: global.zIndex('header');
   display: flex;
-  @include MixinWrapperWidth(1280, 'full');
-  @include MixinFontSize(14, 40);
-  @include custom-breakpoint(1000) {
+  @include global.MixinWrapperWidth(1280, 'full');
+  @include global.MixinFontSize(14, 40);
+  @include global.custom-breakpoint(1000) {
     font-size: 20px;
   }
 }

src/assets/scss/object/utility/_device.scss

@@ -1,11 +1,12 @@
+@use "../../foundation/" as global;
 .u-is-pc {
-  @include sp-only() {
+  @include global.sp-only() {
     display: none !important;
   }
 }
 
 .u-is-sp {
-  @include pc-only() {
+  @include global.pc-only() {
     display: none !important;
   }
 }

src/assets/scss/object/utility/_index.scss

@@ -0,0 +1 @@
+@forward 'device';

src/assets/scss/style.scss

@@ -1,10 +1,6 @@
-// @import './foundation/debug'
-@import './foundation/variables/*';
-@import './foundation/mixins/*';
-@import './foundation/reset';
-@import './foundation/default';
-@import './foundation/barba/*';
-@import './layout/*';
-@import './object/components/*';
-@import './object/project/*';
-@import './object/utility/*';
+// @use './foundation/debug';
+@use './foundation/reset';
+@use './foundation/default';
+@use './foundation/barba/animation';
+@use './layout';
+@use './object';

src/pug/about/index.pug

@@ -5,7 +5,7 @@ block append variables
     var Title = 'about'
     var Description = ''
     var imgPath = `${path}assets/img/`
-    var imgWebpPath = `${path}assets/img-webp/`
+    var imgWebpPath = `${path}assets/img/`
     var Noindex = false // ページをnoindexにさせる場合true
 block content
   p.p-top アバウトページ

src/pug/index.pug

@@ -5,7 +5,7 @@ block append variables
     var Title = 'top'
     var Description = ''
     var imgPath = `${path}assets/img/`
-    var imgWebpPath = `${path}assets/img-webp/`
+    var imgWebpPath = `${path}assets/img/`
     var Noindex = false // ページをnoindexにさせる場合true
 block content
   p.p-top トップページ

webpack.common.js

@@ -4,7 +4,6 @@ const { resolve, join } = require('path')
 const autoprefixer = require('autoprefixer')
 const CopyPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const globImporter = require('node-sass-glob-importer')
 
 const { merge } = require('webpack-merge')
 const pages = require('./webpack.pages.js')
@@ -15,7 +14,7 @@ const assetsPath = {
   jsPath: 'assets/js',
   cssPath: 'assets/css',
   imgPath: 'assets/img',
-  imgWebpPath: 'assets/img-webp',
+  imgWebpPath: 'assets/img',
   fontPath: 'assets/fonts',
   staticPath: 'static',
 }
@@ -67,9 +66,6 @@ module.exports = merge(pages, {
             loader: 'sass-loader',
             options: {
               implementation: require('sass'),
-              sassOptions: {
-                importer: globImporter(),
-              },
             },
           },
         ],