nuxt.js 怎么加入全局 scss 变量

平时做项目, 总是会创建一个存放全局 scss 变量的文件, 比如叫 variables.scss 来统一管理各种全局样式

假设此文件路径为 @/assets/style/variables.scss

我们的诉求是在各种 scss 文件或者 vue 文件中使用 scss 变量, 而不需要每个都手动引入 variables.scss

使用 vue-cli 创建的项目非常简单

只需在 vue.config.js 中加上一条

css: {
  loaderOptions: {
    sass: {
      data: `@import "@/assets/style/variables.scss";`
    }
  }
}

问题来了, nuxt.js 创建的项目该怎么整呢?

 Undefined variable: "$--color-primary"

看了几个小时的报错后搞出了如下配置, 亲测是完全可用的, 如果有更简单的写法请告诉我~~

build: {
  extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
    // 此处为新增配置代码
    config.module.rules.forEach((rule) => {
      if (/scss/.test(rule.test.toString())) {
        rule.oneOf.forEach(item => {
          item.use.push({
            loader: 'sass-loader',
            options: {
              sourceMap: false,
              data: '@import "@/assets/style/variables.scss";'
            }
          })
        })
      }
    })
  }
}

chunpu / blog

nuxt.js 怎么加入全局 scss 变量 #103