框架原始碼：碼雲     

直接上步驟：

第一：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>
 

原始碼 ：碼雲