Vue Cli3 配置alias以及如何使用scss

首先  npm install sass-loader node-sass --save

1、配置alias

在vue.config.js里：紅色部分

const path = require('path');

module.exports = {
  configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'),
        style: path.resolve(__dirname, 'src/style') } } },
  devServer: {
    port: 8081,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/style/_variable.scss";'
      }
    }
  }
};

2、使用scss以及如何使用全局變量

在src目錄下建立style文件夾，在style文件夾下建立_variables.scss

 

 _variables.scss：

$blue: #00a0dc;
$blackColor: #07111b;
$lightColor: #93999f;

// 背景全鋪
@mixin full_background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: pink;
}

3、在組件中使用scss變量

 

 效果圖：