Vue 不编译带有注释“//”的 .scss 文件答案

【问题标题】：Vue does not compile .scss files with comment "//"Vue 不编译带有注释“//”的 .scss 文件
【发布时间】：2020-01-10 03:31:55
【问题描述】：

我对 vue.js 和一点堆栈还是很陌生。

在我的.scss 文件中，我评论了如下行：

//   overflow: hidden;

但是当我保留这条线时，我得到了错误：

未知单词

和编译器突出显示此注释。我看到它与 webpack 配置有关，但我没有 webpack.config.js 文件，我只有 vue.config.js 文件，不知道如何配置它才能正常工作。这是我的配置文件，其中包含所有样式的变量文件。

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

我已经安装了 sass-loader 包并且工作正常 - 仅在 .scss 文件中的 cmets 存在问题。我还找到了https://github.com/webpack-contrib/sass-loader/issues/171，但他们在谈论我没有的webpack.config.js。

【问题讨论】：

这可能会帮助您从 vue.config.js 编辑webpage.config.js：cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule

【解决方案1】：

我遇到了同样的问题。更改 vue.config.js 文件有点复杂。但是，当我在 app.js 中使用 lang="scss" 时，我的所有 css 导入都存在，这个问题得到了解决。

<style lang="scss">
...
@import './stylesheets/custom.scss';
...
</stlye>

【讨论】：