vue2.x中sass的使用和全局变量的配置（详细步骤）

step1：

>>>package.json中添加下面三个依赖包
"dependencies": {
  "node-sass": "^4.11.1",
  "sass-loader": "^7.3.0",
  "sass-resources-loader": "^1.3.3",
},

注意版本号要保持一致，用最新版的会有莫名其妙的报错

step2：

// build/utils.js 中 修改scss的配置如下：
return {
    sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    scss: generateLoaders('sass').concat( // lodaer处理scss时.concat()方法，合并了公共scss
    {
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/style/common.scss') //全局scss文件路径
      }
    })
  }

'…/src/assets/style/common.scss’路径为设置的全局样式文件路径

step3：
重新跑一遍： npm i 安装依赖包
npm start 重启项目就可以在项目中无需引入直接使用common.scss中声明的变量等等。