在Vue項(xiàng)目中使用scss,如果寫了一套完整的有變量的scss文件。那么就需要全局引入，這樣在每個組件中使用。

可以在mian.js全局引入，下面是使用方法。

1： 安裝node-sass、sass-loader、style-loader

npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev    

2： 安裝sass-resources-loader （如果不安裝的話變量會報錯）

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

3： 修改build中的utils.js(vue-cli2.0)

scss: generateLoaders('sass'),

修改成:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/main.scss') //這里寫自己的文件路徑
    }
  }
)

4:vue-cli4.0配置方法

// vue.config.js
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  indexPath: 'index.html',
  filenameHashing: true,
  lintOnSave: true,
  productionSourceMap: false,
  css: {
    loaderOptions: {}
  },
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // 要公用的scss的路徑
          resources: './src/assets/scss/public.scss'
        })
        .end()
    })
  }
}

在main.js里面引入即可。 或者是不在main.js引入，單獨(dú)在組件引入也可以。 在組件中的style標(biāo)簽添加lang="scss"。