框架源代码：码云     

直接上步骤：

第一：sass需要的模块 （没有安装cnpm 就用 npm咯）
 

cnpm install --save-dev sass-loader

cnpm install --save-dev node-sass

cnpm install --save-dev sass-resources-loader

第三个模块是加载scss文件用的（如果只是使用sass语法，不使用全局scss样式文件，不用加载这个模块）

第二 ：配置loader （webpack.base.conf.js）

  {test: /\.sass$/,loaders: ['style', 'css', 'sass']},

第三 ：引入 全局sass文件（util.js）

//路径根据自己的来
function resolveResource(name) {return path.resolve(__dirname, '../src/style/' + name);
}function generateSassResourceLoader() {var loaders = [cssLoader,'sass-loader',{loader: 'sass-resources-loader',options: {resources: [resolveResource('theme.scss')]  }}];if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}}

  //这个是官方配置，注释掉//  sass: generateLoaders('sass', { indentedSyntax: true }),//  scss: generateLoaders('sass'),sass: generateSassResourceLoader(),scss: generateSassResourceLoader(),

我的路径 ：

 

使用demo ：

theme.scss 

$theme-red: #da3838;

KgoApp.vue 

<style lang="scss">
#kgo-head {position: absolute;top: 0;height: 55px;width: 100%;background-color: $theme-red;
}
</style>

源代码 ：码云