Webpack 共享全局变量SASS-vue

我正在vue中开发一个项目，在一些组件中，我的想法是使用单文件组件

为了在组件中使用SASS，我遵循了的文档

它成功了，问题是现在我想添加带有SASS变量的文件，但我没有得到它

我在某些方面看到了将此文件导入每个组件的方法，但我认为这不是最好的解决方案，因此我继续搜索，发现一些人以我在代码中表示的方式说话，但它仍然不起作用

任何建议

webpack.config

module.exports = {
    module: {
        rules:[
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            data: '@import "/resources/assets/sass/_variables.scss";'
                        },
                    }
                ]
            }
        ]
    }
};

组件vue

<template>
     <div class="test">
         <span>test</span>
     </div>
</template>

<style lang="scss">
    .test {
        background: $red;
    }
</style>

你能试试这个吗

options: {
  resources: [
   path.resolve(__dirname, '../src/assets/sass/_variables.scss')
  ]
} 

所以它是这样的：

module.exports = {
        module: {
            rules:[
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.scss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                             resources: [
                              path.resolve(__dirname, '../src/assets/sass/_variables.scss')
                             ]
                            },
                        }
                    ]
                }
            ]
        }
    };

怎么了？ 我也有同样的问题。尝试注释

css加载程序

和

vue样式加载程序

将来会有问题吗？ 所以，正如我所看到的，你甚至没有同时使用这两个库。所以不 但是，如果您想将其保留在项目中，请确保

vue样式加载器

和

css加载器

正确安装在包.json中

要安装它们，请执行以下操作：

npm安装-D vue风格加载程序

npm安装-D css加载程序

但我个人认为最好不要用它

您的代码如下所示：

模块：{
规则：[
//……省略了其他规则
{
测试：/\.scss$/,，
使用：[
//“vue样式加载程序”，
//'邮政编码加载器'，
{
加载器：“sass加载器”，
选项：{
//您也可以从文件中读取，例如`variables.scss`
//如果sass加载程序版本=8，请在此处使用“prependData”，或
//如果sass加载程序版本<8，则为'data'
其他数据：`@import“path/to/your/file.scss”`
}
}
]
}
]
},

---

我希望它能对你有所帮助

我尝试使用vue loder文档

data:'$color:red；'中的示例并且它也不起作用。
module.exports = {
        module: {
            rules:[
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.scss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                             resources: [
                              path.resolve(__dirname, '../src/assets/sass/_variables.scss')
                             ]
                            },
                        }
                    ]
                }
            ]
        }
    };

    module: {
            rules: [
              // ... other rules omitted
       
              {
                test: /\.scss$/,
                use: [
                //   'vue-style-loader',
                //   'postcss-loader',
                  {
                    loader: 'sass-loader',
                    options: {
                      // you can also read from a file, e.g. `variables.scss`
                      // use `prependData` here if sass-loader version = 8, or
                      // `data` if sass-loader version < 8
                      additionalData: `@import "path/to/your/file.scss";`
                    }
                  }
                ]
              }
            ]
          },