vue-cli4.x 使用 scss 全局變量設置使用

目錄

• 本記錄僅針對於 vue-cli4.x 使用 scss 全局變量設置使用
• 確定依賴包
• 相關配置
• 使用

---

本記錄僅針對於 vue-cli4.x 使用 scss 全局變量設置使用

在網上也找了很多版本的方法，嘗試后都不可行。由於我使用的是 vue-cli4.x 腳手架搭建的項目，在網上也找到一個解決方案，特此記錄。

確定依賴包

先在 package.json 文件中確定是否集成了 sass 相關的包 node-sass 和 sass-loader. 若沒集成，需要先進行相關安裝。

npm install node-sass

npm install sass-loader

相關配置

在安裝完相關依賴后，需要在 vue.config.js 中進行相關配置，重點配置路徑。 路徑后面的 ;是必須的

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/base";`,
            },
        },
    },
}

使用

在需要使用全局樣式的地方，就可以進行使用 base.scss 文件中定義的樣式。但是得注意在 加 lang="scss"

logo.vue 文件中使用。

<style lang="scss" scoped>
.logo {
    float: left;
    height: $header-height;
}
</style>

原文地址：http://book.levy.net.cn/doc/frontend/vue/vue_scss_set.html