vue 單獨引用sass文件

安裝文件 sass-resources-loader：

npm install --save-dev sass-resources-loader

 修改build/utils.js:

全局文件引入 當然只想編譯一個文件的話可以省去這個函數

function resolveResource(name) {  
  return path.resolve(__dirname, '../src/style/' + name);
}

function generateSassResourceLoader() {  
  var loaders = [
    cssLoader,  'sass-loader',
    {      
      loader: 'sass-resources-loader',      
      options: { // 多個文件時用數組的形式傳入，單個文件時可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
        resources: [resolveResource('theme.scss')]  
      }
    }
    ];   
 if (options.extract) {      
    return ExtractTextPlugin.extract({        
    use: loaders,        
    fallback: 'vue-style-loader'
    })
  } else {      
    return ['vue-style-loader'].concat(loaders)
  }
}

 將默認的sass配置改為 generateSassResourceLoader()

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // vue-cli默認sass配置
    // sass: generateLoaders('sass', { indentedSyntax: true }), 
    // scss: generateLoaders('sass'),
    // 新引入的sass-resources-loader
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

改完配置后重啟服務就可以在theme.scss里定義全局變量並在頁面中引用了。

需要注意的是，scss里的變量是$開頭，而less里的變量是@開頭。比如我想定義一個項目的主色調變量，我可以在theme.scss里這樣定義：

$main-color: #fd7a00;