共享全局变量SASS-Vue

时间:2018-08-08 11:48:56

标签: webpack vue.js sass vue-loader

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

我遵循了vue-loader的文档,以便在组件中使用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>

错误

Undefined variable: "$red".

2 个答案:

答案 0 :(得分:1)

怎么了? 我遇到了同样的问题。尝试评论 css-loadervue-style-loader

以后会不会有问题?

所以,正如我所看到的,您甚至没有同时使用这两个库。所以不行。 但是,如果您想将其保留在您的项目中,请确保在您的 package.json 中正确安装了 vue-style-loadercss-loader

安装它们:

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

希望对你有帮助!

答案 1 :(得分:0)

你可以试试吗?

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')
                             ]
                            },
                        }
                    ]
                }
            ]
        }
    };