Symfony：如何将 Sass 文件导入到每个 Vue 组件中答案

【问题标题】：Symfony: How to Import a Sass File into Every Vue ComponentSymfony：如何将 Sass 文件导入到每个 Vue 组件中
【发布时间】：2021-03-02 20:44:02
【问题描述】：

我目前正在为此苦苦挣扎。在我的 Symfony 项目中，我有一个 _variables.scss 文件，其中保存了我的全局变量（例如颜色）。

这包含在我的主 scss 文件中，例如 @import "variables"; - 工作正常。现在我也在我的项目中使用 VueJs，我想在 Vue 组件中使用我的全局变量。现在实现这一点的一种方法就是导入 variables.scss 本身：

//CustomButton.vue
<template>
   ...
</template>

<script>
    export default {
        name: "CustomButton"
    }
</script>

<style lang="scss" scoped>
    @import "../../scss/_variables.scss";

    //able to use variables here
</style>

但是随着项目的不断增长和不同的路径，这似乎是不必要的工作。我想要实现的是自动将variables.scss加载到每个Vue组件中。

这里有很好的解释：[css-tricks.com - How to Import a Sass File into Each Vue Component in an App][1]

遗憾的是，这在我的情况下不起作用（我认为 vue.config.js 被完全忽略） - 变量在 Vue 组件中仍然不可用。我还尝试将 JavaScript 添加到我的主 js 文件中——我在其中加载 Vue——但这似乎破坏了一些东西（一些模块异常）。

有什么具体的方法可以用 symfony 实现这一点吗？

PS：我正在使用 Symfony 5、Sass-Loader 9.0.1、Vue 2.6.12、Vue-Loader 15、Vue-Template-Compiler 2.6.12 [1]：https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/

解决方案 1：

//webpack.config.js

.enableSassLoader(options => {
    options.additionalData = `
        @import "./assets/scss/_variables.scss"; //path.resolve is not working in my case to import the absolute path
    `
})
```

【问题讨论】：

你用什么来编译你的代码？因为你使用的是 Symfony，我想你可能会使用 Encore，对吧？
@H3lltronik 是的，再来一次
@Syllz，看起来您需要使用 Encore 文档的 symfony.com/doc/current/frontend/encore/… 这部分来调整我的配置示例以满足您的需求。不幸的是，我对 symfony Encore 并不熟悉。
添加此代码后是否重新启动了开发服务器？因为我为我工作

标签： vue.js symfony sass

【解决方案1】：

Webpack 配置：

module.exports = {
...
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                  process.env.NODE_ENV !== 'production'
                      ? 'vue-style-loader'
                      : MiniCssExtractPlugin.loader,
                  'css-loader',
                  {
                      loader:  'sass-loader',
                      options: {
                          data: `
                              @import "functions";
                              @import "variables";
                              @import "mixins";
                          `,
                          includePaths: [
                              path.resolve(__dirname, "../asset/scss/framework")
                          ]                      
                      }
                  }
                ]
            },        
        ]
}

此配置从文件夹"../asset/scss/framework" 导入 3 个文件：“_functions.scss”、“_variables.scss”、“_mixins.scss”，并且无需在您的 vue 组件中每次都使用@import "../../scss/_variables.scss";。也许，你会根据你的需要调整这个 webpack 配置，或者会想办法解决你的问题。

【讨论】：

@webprogrammar 嗨，感谢您的精彩回答。它真的帮了我很多，经过一些研究，我现在有了一个非常简单的 symfony 解决方案。我也尝试了您的解决方案，但是在我的情况下路径确实解决了错误。最后我总是有类似@import c:\...\assets\scss\_variables.scss而不是@import c:/.../assets/scss/_variables.scss。所以斜杠/反斜杠在我的情况下是错误的 - 我不知道为什么：/但是我会用我找到的解决方案更新我的答案。也许有人甚至有更好的方法。但再次感谢！ :)

【解决方案2】：

这就是你需要的 c:

由于您使用的是 Encore，请修改您的 webpack.config.js，添加此代码

var Encore = require('@symfony/webpack-encore');

Encore.configureLoaderRule('scss', (loaderRule) => {
    loaderRule.oneOf.forEach((rule) => {
        rule.use.push({
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // Change this url to your _variables.scss path
                    path.resolve(__dirname, './assets/app/styles/_vars.scss'),
                ]
            },
        })
    })
})

您还必须安装 sass-resources-loader

npm install sass-resources-loader

然后再次编译您的代码，您的 sass 变量将无处不在

【讨论】：

【解决方案3】：

我的问题的解决方案：

//webpack.config.js

.enableSassLoader(options => {
    options.additionalData = `
        @import "./assets/scss/_variables.scss"; //path.resolve is not working in my case to import the absolute path
    `
})

这将在每个 sass 模板 + vue 组件中导入文件

【讨论】：