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

Question

我对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文件中的注释中存在问题。 我还发现了https://github.com/webpack-contrib/sass-loader/issues/171，但他们在谈论我没有的webpack.config.js。

Answer 1

我有同样的问题。更改vue.config.js文件有点复杂。 但是，当我在所有我的CSS导入都存在的app.js中使用 lang =“ scss” 时，此问题已解决。

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