jamie-yang / vue3-boilerplate Goto Github PK

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@font-face {
  font-family: 'Share Tech';
  src: url('../src/assets/fonts/ShareTech-Regular.eot');
  src:
    url('../src/assets/fonts/ShareTech-Regular.eot?#iefix') format('embedded-opentype'),
    url('../src/assets/fonts/ShareTech-Regular.woff2') format('woff2'),
    url('../src/assets/fonts/ShareTech-Regular.woff') format('woff'),
    url('../src/assets/fonts/ShareTech-Regular.ttf') format('truetype'),
    url('../src/assets/fonts/ShareTech-Regular.svg#ShareTech-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
</style>

<e>      src/App.vue:15:7
<e>      13 |   font-family: 'Share Tech';
<e>      14 |   src: url('../src/assets/fonts/ShareTech-Regular.eot');
<e>    > 15 |   src:
<e>         |       ^
<e>      16 |     url('../src/assets/fonts/ShareTech-Regular.eot?#iefix') format('embedded-opentype'),
<e>      17 |     url('../src/assets/fonts/ShareTech-Regular.woff2') format('woff2'),
<e>      18 |     url('../src/assets/fonts/ShareTech-Regular.woff') format('woff'),
<e>
<e> ✘ 1 problem (1 error, 0 warnings)
<e>
<e>
<e> Errors:
<e>   1  https://google.com/#q=prettier%2Fprettier
<e>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@font-face {
  font-family: 'Share Tech';
  src: url('../src/assets/fonts/ShareTech-Regular.eot');
  src: url('../src/assets/fonts/ShareTech-Regular.eot?#iefix') format('embedded-opentype'),
    url('../src/assets/fonts/ShareTech-Regular.woff2') format('woff2'),
    url('../src/assets/fonts/ShareTech-Regular.woff') format('woff'),
    url('../src/assets/fonts/ShareTech-Regular.ttf') format('truetype'),
    url('../src/assets/fonts/ShareTech-Regular.svg#ShareTech-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
</style>

$ stylelint "./src/**/*.vue" "./src/**/*.scss"

src/App.vue
 15:6  ✖  Expected newline after ":" with a multi-line declaration   declaration-colon-newline-after

➜  vue3-boilerplate git:(master) ✗ yarn build
yarn run v1.22.5
$ node service/commands/build.js
assets by status 123 KiB [cached] 5 assets
Entrypoint app = static/js/chunk-vendors.ba5071a5.js static/js/app.530a2040.js

ERROR in ./src/App.vue?vue&type=style&index=0&id=6922b061&lang=scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[12].use[0]!./src/App.vue?vue&type=style&index=0&id=6922b061&lang=scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (/PRIVATE_PATH/vue3-boilerplate/node_modules/mini-css-extract-plugin/dist/loader.js:50:14)
 @ ./src/App.vue?vue&type=style&index=0&id=6922b061&lang=scss 1:0-418 1:0-418
 @ ./src/App.vue 4:0-63
 @ ./src/main.ts 2:0-28 5:10-13

webpack 5.24.4 compiled with 1 error in 17119 ms

 ERROR  Build failed with errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Error: NormalModuleFactory.afterResolve (CaseSensitivePathsPlugin, sw-plugin-after-resolve) is no longer a waterfall hook, but a bailing hook instead.
Do not return the passed object, but modify it instead. 
Returning false will ignore the request and results in no module created.

node:internal/modules/cjs/loader:1125
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/x/Documents/Sites/test/node_modules/strip-ansi/index.js

@font-face {
  font-family: 'Share Tech';
  src: url('../fonts/MY-FONT.eot');
  src: url('../fonts/MY-FONT.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MY-FONT.woff2') format('woff2'),
    url('../fonts/MY-FONT.woff') format('woff'),
    url('../fonts/MY-FONT.ttf') format('truetype'),
    url('../fonts/MY-FONT.svg#MY-FONT') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

<style lang="scss">
@import './assets/styles/_fonts.scss';
</style>

<e> Module build failed (from ./node_modules/css-loader/dist/cjs.js):
<e> Error: Can't resolve '../fonts/MY-FONT.eot' in '/ABSOLUTE-PATH'

@font-face {
  font-family: 'Share Tech';
  src: url('../src/assets/fonts/MY-FONT.eot');
  src: url('../src/assets/fonts/MY-FONT.eot?#iefix') format('embedded-opentype'),
    url('../src/assets/fonts/MY-FONT.woff2') format('woff2'),
    url('../src/assets/fonts/MY-FONT.woff') format('woff'),
    url('../src/assets/fonts/MY-FONT.ttf') format('truetype'),
    url('../src/assets/fonts/MY-FONT.svg#MY-FONT') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}