решил подключить препроцессор SASS к моему приложению, но выдает следующую ошибку():
Uncaught Error: Module parse failed: Unexpected token (22:10)
You may need an appropriate loader to handle this file type.
| header
| width: 100%
> height: 50px
| background-color: white
| border-bottom: 1px solid #ACB1B4
Подключаю следующим образом:
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
},
Использую:
<style scoped lang="sass">
header
width: 100%
height: 50px
background-color: white
border-bottom: 1px solid #ACB1B4
</style>
Зависимости:
"dependencies": {
"fabric": "^2.6.0",
"file-loader": "^3.0.1",
"log4js": "^4.0.2",
"underscore": "^1.9.1",
"vue": "^2.6.6",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.2",
"vuex": "^3.1.0",
"xml-js": "^1.6.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"copy-webpack-plugin": "^5.0.0",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.0",
"vue-cli": "^2.9.6",
"vue-loader": "^15.6.4",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.6",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0"
}
Может подскажите в чем может быть проблема, так как не знаю что уже делать...
Попробуйте подключить sass-loader так:
{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.scss$/,
use: ['vue-style-loader','css-loader','sass-loader']
}, {
test: /\.sass$/,
use: ['vue-style-loader','css-loader','sass-loader?indentedSyntax']
}
vue-loader вызовет нужные лоадеры, основываясь на значении атрибута lang
Продвижение своими сайтами как стратегия роста и независимости