Проблема c SASS лоадером из Vue приложения

154
25 декабря 2019, 07:20

решил подключить препроцессор 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"

}

Может подскажите в чем может быть проблема, так как не знаю что уже делать...

Answer 1

Попробуйте подключить 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

READ ALSO
Ограниченный период выбора дат в jQuery UI Datepicker

Ограниченный период выбора дат в jQuery UI Datepicker

Я использую jQuery UI Datepicker и расширение для него https://habrcom/ru/post/303186/

122
Клик по картинке на js

Клик по картинке на js

Как сделать на js клик по картинке? попытался через jquery, но не срабатывает

172
slick слайдер контента

slick слайдер контента

Всем привет, на базе slick делаю слайдер, так вот подскажите пожалуйста, как его настроить так, что бы при нажатии на кнопки левый слайдер (миниатюры)...

156
Ошибка при переводе строки в число

Ошибка при переводе строки в число

Есть ответ сервера в виде строкиПри попытке перевести его в число выпадает NaN, подскажите почему?

118