使用Vue.js中的vue.config.js修复sass-loader错误

问题描述 投票:0回答:1

我试图在从Vue CLI 3生成的Vue.js应用程序中使用外部sass文件(About.sass)。但是我在编译时收到有关“未知单词”的错误。

经过大量的研究,我的应用程序使用'webpack-chain',我使用'vue.config.js'来配置sass-loader。

我的配置时间表:

  1. Vue CLI 3 - 默认预设
  2. 添加了<style src="../sass/About.sass" scoped></style>
  3. yarn添加sass-loader node-sass style-loader
  4. 将加载程序添加到vue.config.js

vue.config.js

module.exports = {
    chainWebpack: config => {
      config.module
        .rule('sass')
        .test(/\.sass$/)
        .use('sass-loader')
          .loader('sass-loader')
          .loader('css-loader')
          .loader('style-loader')
        .end()
    }
}

我真的被封锁了,无法让它发挥作用。我收到此错误:

 ERROR  Failed to compile with 1 errors                                                                        22:02:03

 error  in ./src/sass/About.sass?vue&type=style&index=0&id=c226fde6&scoped=true&lang=css&

Syntax Error: SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/index.js??ref--9-oneOf-1-1!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./About.sass?vue&type=style&index=0&id=c226fde6&scoped=true&lang=css&");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

任何帮助或建议?提前致谢。

sass vue-cli-3 sass-loader
1个回答
0
投票

似乎我忘了在标签lang="sass"中指定类型<style src="../sass/About.sass" scoped></style>

Vue非常聪明,可以配置加载器,因此甚至不需要'vue.config.js'。

© www.soinside.com 2019 - 2024. All rights reserved.