webpack 在 vue 项目中 scss 全局变量使用技巧简述？

随着前端项目变得越来越庞大，需要使用的样式变量也越来越多。这时候，使用全局 scss 变量可以提高开发效率，并增加项目的可维护性。但是，在使用 webpack 构建 vue 项目时，如何正确使用全局 scss 变量呢？本文将对这一问题进行详细探讨，并给出解决方案。

安装相关依赖

在使用 webpack 构建 vue 项目时，需要用到两个相关的依赖：sass-loader 和 node-sass。首先，我们需要安装这两个依赖：

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

配置 webpack

在项目根目录下新建一个 vue.config.js 文件，内容如下：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/variables.scss";
        `
      }
    }
  }
}

这里，我们配置了一个 css.loaderOptions.sass.prependData 选项，指定了要预先加载的 scss 文件。可以将这个文件中定义的全局变量在整个项目中进行使用。

例子

假设我们定义了以下的全局 scss 变量：

// variables.scss
$primary-color: #42b983;
$font-size: 16px;

在组件中使用这些变量：

// my-component.vue
<style lang="scss">
  .title {
    color: $primary-color;
    font-size: $font-size;
  }
</style>

现在，我们可以放心使用全局 scss 变量了。

总结

在使用 webpack 构建 vue 项目时，使用全局 scss 变量可以提高项目的可维护性。通过配置 webpack，我们可以在整个项目中使用这些变量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f4429add4f0e0ff7f174e