vue中配置scss全局变量
  在写项⽬的过程中，如果⽤的是scss来编写样式代码，常常需要定义各种变量，例如主题⾊、主字号之类的，因此我们会把这些变量写到⼀个单独的
_variable.scss⽂件内，但是每次都要在vue单⽂件内引⼊这些变量未免太繁琐了，所以有没有办法可以默认把变量⽂件作为全局⽂件进⾏引⼊呢？答案是肯定的，可以⽤下⾯的⽅法进⾏配置，可以根据当前使⽤的框架和环境来进⾏⽅法的选择。
  ⼀、使⽤vue-cli（即vue-cli2）脚⼿架时
  1. ⾸先，需要安装⼀个loader，sass-resources-loader
npm install sass-resources-loader --save-dev
  2. 到build⽂件夹下的utils.js⽂件，在⽂件内到这段配置代码
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
  3. 修改其中的scss项，改为
scss: generateLoaders('sass').concat({
loader:'sass-resources-loader',
options:{
solve(__dirname,'../src/styles/_variable.scss')
}
})
  4. 重启项⽬，即可在其他⽂件内使⽤这些变量⽂件了
  ⼆、使⽤@vue/cli（即vue-cli3）脚⼿架时
  1. 到fig.js⽂件，如果没有的话，则⾃⼰在根⽬录新建⼀个即可
  2. 在⽂件内编写如下代码：
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/_variable.scss";`
css变量}
}
}
}
  3. 重启项⽬，即可使⽤
  注意：如果编写完以上代码，重启项⽬后出现这个错误：
Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
  那么说明，你安装的sass-loader应该是V8的版本，可以在package.json中查看是否确实如此，如果的确是v8版本以上，则需要配置不同的写法，因为在V8中已经废除了data这个配置项，改为了prependData，具体可以在vue cli官⽹中看到此说明。
  因此，我们需要将配置代码修改成如下样式：css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/_variable.scss";`        }
}
}
  好了，重启⼀下项⽬，⼤功告成。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。