时间戳

首页 > 解决方案 > 共享全局变量 SASS - vue

webpack - 共享全局变量 SASS - vue

问题描述

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

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

它奏效了，问题是现在我想添加带有 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>

错误

Undefined variable: "$red".

标签： webpackvue.jssassvue-loader

解决方案

这是怎么回事？我遇到了同样的问题。尝试评论css-loader和vue-style-loader。

以后会不会有问题？

所以，正如我所见，你甚至没有使用这两个库。所以不行。vue-style-loader但是，如果你想将它保留在你的项目中，请确保它css-loader正确安装在你的package.json中。

要安装它们：

  1. npm install -D vue-style-loader
  2. npm install -D css-loader

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

您的代码将如下所示：

    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";`
                    }
                  }
                ]
              }
            ]
          },

我希望它对你有帮助！

推荐阅读