Я пытаюсь использовать внешний файл sass (About.sass) в своем приложении Vue.js, сгенерированном из Vue CLI 3. Однако при компиляции я получаю сообщение об ошибке «Неизвестное слово».
После долгих исследований мое приложение использует 'цепочку веб-пакетов', а я использую 'vue.config.js' для настройки sass-loader.
Хронология моей конфигурации:
- Vue CLI 3 - предустановка по умолчанию
- добавлено
<style src="../sass/About.sass" scoped></style>
- пряжа добавить загрузчик sass node-sass style-loader
- добавлен загрузчик в 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, '']];
Любая помощь или совет? Заранее спасибо.