在 Vue.js 中，CSS 樣式通常被定義在單文件組件（.vue 文件）的 style 標(biāo)簽內(nèi)，有時(shí)候我們可能會(huì)遇到 CSS 代碼被自動(dòng)壓縮成一行，導(dǎo)致代碼可讀性變差的問(wèn)題，為了解決這個(gè)問(wèn)題，我們可以采取以下步驟：

1、使用樣式預(yù)處理器：Vue.js 支持多種樣式預(yù)處理器，如 Sass、Less 和 Stylus，這些預(yù)處理器可以將 CSS 代碼轉(zhuǎn)換為更易于閱讀和編寫(xiě)的格式，使用 Sass，你可以將 CSS 規(guī)則分組并嵌套，使代碼更加結(jié)構(gòu)化。

2、配置樣式壓縮：在構(gòu)建過(guò)程中，可以通過(guò)配置 Webpack 的 CSS 加載器和 PostCSS 插件來(lái)壓縮 CSS 代碼，使用css-loader 和postcss-loader 插件，可以設(shè)置適當(dāng)?shù)倪x項(xiàng)來(lái)避免代碼壓縮成一行。

3、手動(dòng)格式化 CSS 代碼：如果自動(dòng)壓縮無(wú)法解決問(wèn)題，你可以手動(dòng)格式化 CSS 代碼以提高可讀性，使用空格和換行符將規(guī)則分組，并使用適當(dāng)?shù)目s進(jìn)和空格來(lái)分隔代碼。

通過(guò)以上方法，你可以確保 Vue.js 項(xiàng)目中的 CSS 代碼保持整潔和可讀的格式，而不會(huì)因自動(dòng)壓縮而影響代碼質(zhì)量。