vite v4.5.1 building for production...が出た場合の対処法

概要

• laravel + Vueで作成中のアプリをbuildしたところエラーが出てしまった。
• 対処法を忘れないうちに簡単にまとめておく

エラー内容

err

root@bf2e0773ce1f:/var/www/html# npm run build

> build
> vite build

vite v4.5.1 building for production...
✓ 135 modules transformed.
warnings when minifying css:
▲ [WARNING] A nested style rule cannot start with "a" because it looks like the start of a declaration [css-syntax-error]

    <stdin>:35:0:
      35 │ a[data-v-4e3ad3a9] {
         │ ^
         ╵ :is(a)

  To start a nested style rule with an identifier, you need to wrap the identifier in ":is(...)" to prevent the rule from being parsed as a declaration.


public/build/manifest.json              0.42 kB │ gzip:  0.17 kB
public/build/assets/app-5c5a93ca.css    2.03 kB │ gzip:  0.80 kB
public/build/assets/app-041e359a.css  225.70 kB │ gzip: 30.76 kB
public/build/assets/app-d8199b45.js   278.03 kB │ gzip: 97.43 kB

解決法

cssのaタグの書き方が違うと怒っている。
今回の場合、scssで書いているvueファイルがあったが、scssの指定が漏れてしまっていた。
scssを利用するには、cssとは違い言語の指定を忘れてはいけないようだ。

- <style scoped>
+ <style scoped lang="scss">