Vue-CLI 使 sass 文件可全局访问答案

【问题标题】：Vue-CLI make sass file accessable globallyVue-CLI 使 sass 文件可全局访问
【发布时间】：2021-05-11 12:02:11
【问题描述】：

我在 src/assets/scss/main.sass 中创建了一个 main.sass 文件。只声明了一个 var。

$primary: #b2209d

我的 Vue 文件：

<template>
  <div id="app">
    <div class="whatever">
      dawdaw
    </div>
  </div>
</template>

<style lang="sass">
.whatever
  background: $primary
</style>

还有我的 vue.config.js

module.exports = {
  lintOnSave: false,
  css: {
    requireModuleExtension: false,
    loaderOptions: {
      css: {
        modules: {
          localIdentName: '[name]_[hash:base64:4]'
        }
      },
      sass: {
        prependData: `@import "@/assets/scss/main.sass";`
      }
    }
  }
}

我的 vue/cli 版本是：4.3.1。当我在vue文件中直接导入我的main.sass文件时，它可以工作，所以我知道路径是def。对。

我错过了什么吗？

【问题讨论】：

标签： vue.js sass

【解决方案1】：

这是 Webpack 和 Vue 最愚蠢的方面之一，因为你会认为他们只是在配置中为此创建一个简单的处理程序，但没有。每次 Webpack 发生变化时，你都必须重新学习如何做到这一点，而且每次都会变得更糟。 Nuxt 处理起来更简单，Vue 应该复制它们。上次我不得不在 Vue PWA 中做这件事（在切换到 Nuxt 并且永不回头之前），它是这样的：

const globalSassFiles = ['~@/assets/styles/global.scss']

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: globalSassFiles.map(src => '@import "' + src + '";').join('\n')
      }
    }
  },
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(match => {
      config.module
        .rule('sass')
        .oneOf(match)
        .use('sass-loader')
        .tap(opt => {
          return Object.assign(opt, {
            prependData: globalSassFiles.map(src => '@import "' + src + '"').join('\n')
          })
        })
    })
}

荒谬，对吧？

【讨论】：

圣牛。我稍后会检查并回复您