Sass

Question

我创建了一个vue.config.js文件来设置一些全局sass变量（就像documentation指定的一样），但是当尝试访问组件中的变量时，出现了未定义的错误。在组件中手动添加相同的导入语句是可行的，但是不知何故没有从vue.config.js文件内部将其提取。我检查是否已安装了node-sass和sass-loader，并且vue.config.js在项目根目录中（在package.json旁边）。我想念什么？

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

Answer 1

将data更改为prepandData

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

您可以在此处了解更多信息：pre-loader docs

Answer 2

此代码适用于 vue3

安装：

Sass

npm install -D sass-loader@^10 sass

纤维

npm install -D fibers

样式资源加载器

npm i style-resources-loader -D

在你的 vue.config.js（根级项目）中

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/styles/scss/_variables.scss";
                `
            }
        }
    }
}enter image description here

符号 @ 表示您的文件从 src 文件夹开始

Answer 3

没有完整的上下文很难进行故障排除，因此您可以尝试以下几种方法：

确保自更改配置以来重新启动开发环境（重新运行yarn dev或npm run dev）
将模板文字保持为一行，如docs中所使用。这不应该有所作为，但可能会有所不同。（例如data: `@import "@/assets/styles/_variables.scss";`）
您可能知道，sass文件前面的下划线表示sass部分。在示例中未使用局部变量，因此也有可能产生效果。（例如，将_variables.scss重命名为variables.scss并使用data: `@import "@/assets/styles/variables.scss";`）
确保sass-loader，node-sass和css-loader软件包是最新的。
尝试使用@之后没有斜杠的路径。例如@assets/styles/_variables.scss。
尝试使用~而不是@。例如~assets/styles/_variables.scss。如果没有其他效果，请尝试将@替换为src。

祝你好运！

Answer 4

npm install --save-dev node-sass sass-loader
在根目录中创建文件'vue.config.js'

在下面添加代码。 记住-@指向/ src文件夹

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/assets/css/variables/_colors.scss";'
      }
    }
  }
}

重新启动项目

在Vue项目中设置全局Sass变量

4 个答案:

Sass

纤维

样式资源加载器