vue-cli 4 使用scss (配置全局scss變量)

有時往往需要一些全局樣式，但用@import導入未免麻煩，這時可以使用vue插件style-resources-loader。

默認情況下 Vue.js 是不支持 Sass、Scss 的，如果想要使用它們，只需要一些簡單的安裝配置即可。

1、安裝node-sass和sass-loader

npm install node-sass -D
npm install sass-loader -D

2、安裝style-resources-loader和vue-cli-plugin-style-resources-loader

npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

3. 在vue.config.js中使用

const path = require('path');
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                // 這個是絕對路徑,不能使用 alias 中配置的別名路徑，如@表示的src
                path.resolve(__dirname, './src/styles/variables.scss')
            ]
        }
    }
}

4.在組件中使用

<style lang="scss" scoped>
#app {
  background-color: $themeColor;
}
</style>

4. 重啟項目

npm run dev

 5、總結

style-resources-loader 的作用：

導入css預處理器的一些公共的樣式文件變量，比如：variables , mixins , functions 避免在每個樣式文件中手動的@import導入，然后在各個css 文件中直接使用變量。