在Vuejs中為所有組件創建一個全局css文件的最好方法是什么？(默認css，如背景顏色、按鈕樣式等)
在index.html中導入css文件 在主組件中導入 將所有的css放在主組件中(但那將是一個巨大的文件) 在你的index.html中導入css，但是如果你使用的是webpack，你只需要在你的主js配置中導入你的樣式表，所有的組件都會得到css。
正如下面的評論所建議的，如果使用webpack，將它添加到main.js中是可行的:
import './assets/css/main.css';我發現最好的方法是在assets文件夾中創建一個新文件，我創建的是global.css，但是你可以隨意命名。然后，在main.js中導入這個文件global.css文件。
注意:使用這種方法，如果您認為global.css變得非常大，您也可以創建多個文件，然后簡單地將所有這些文件導入main.js中。
@\assets\global.css
/* move the buttons to the right */
.buttons-align-right {
justify-content: flex-end;
}主頁. js
import Vue from 'vue'
import App from './App.vue'
import router from './routes'
Vue.config.productionTip = false
// Importing the global css file
import "@/assets/global.css"
new Vue({
router,
render: h => h(App)
}).$mount('#app')在App.vue中，您可以添加一個樣式屬性來聲明您的CSS文件:
<style>
@import './assets/css/global.css';
</style>你也可以這樣做:https://CSS-tricks . com/how-to-import-a-sass-file-into-every-vue-component-in-an-a-app/
我的文件夾大多是這樣構成的:
- src
- assets
- _global.scss
- _colors.scss
- _fonts.scss
- _paragraphs
- index.scss // <-- import all other scss files.這也適用于普通的css。
據我所知，有兩種方法可以達到這個目的。
方法1 利用vue.config.js配置，較少的配置也可以用sass替換:
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `@import '@/style/common.less';`
}
}
}
}方法2 在你的。vue文件，使你的風格看起來像這樣:
<style lang="less">
@import (reference) "../../style/variables.less";
#app {
background: @bgColor;
}
</style>注意:(引用)標志用于使variables.less中定義的變量生效。如果沒有變量，@ import & quot../../style/variables . less & quot；；就足夠了。
作為參考，你也可以看看這個鏈接:
https://github . com/tjcchen/vue-practice/tree/master/multipage-app
薩斯宣布了他們新的模塊系統。為什么不用@use和@forward？
我的方法是將scss與vite結合使用的最佳方式。 使用defineConfig設置全局SCS(顏色、混合)并在所有組件中重用，無需導入
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/main.scss" as *;`,
},
},
},這里:代碼沙箱
在& ltlink & gt元素，在& lthead & gtHTML頁面的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./src/assets/styles.css">
/* ... */
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>