Ошибка сборки VueJS webpack, связанная с SCSS

У меня возникают ошибки, когда я пытаюсь создать свой проект VueJS с таблицами стилей.

Моя ошибка при запуске "yarn run dev --watch" вызывает следующие ошибки:

c:\wamp\www\DBViewer2>yarn run dev --watch
yarn run v1.6.0
warning package.json: No license field
$ encore dev --progress=true --watch
Running webpack ...

  0% compiling
Webpack is watching the files…
                                                                                                                                   95% emitting ERROR  Failed to compile with 1 errors                                                                                                 16:00:56

This dependency was not found:

* !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./assets/App.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./A

Я не уверен, чем это вызвано. Похоже, он ищет файлы не в том месте?

Вот мой файл App.vue:

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang = "scss-loader">
  /* Import Font Awesome Icons Set */
  $fa-font-path: 'font-awesome/fonts/';
  @import 'font-awesome/scss/font-awesome.scss';
  /* Import Simple Line Icons Set */
  $simple-line-font-path: 'simple-line-icons/fonts/';
  @import 'simple-line-icons/scss/simple-line-icons.scss';
  /* Import Bootstrap Vue Styles */
  @import 'bootstrap-vue/dist/bootstrap-vue.css';
  /*// Import Main styles for this application*/
  @import './assets/scss/style';
</style>

Вот мой webpack.config.js:

var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('public_html/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // will create public/build/app.js and public/build/app.css
    .addEntry('main', './assets/main.js')
    .addEntry('vendor', './assets/js/vendor.js')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // enable source maps during development
    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()
    .enableVueLoader()
    // allow sass/scss files to be processed
    .enableSassLoader()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

Любые предложения приветствуются. Провел 2 дня, пробуя разные вещи и исследуя Google. Я просто недостаточно знаком с symfony / encore, и это мой первый проект на vuejs.

Вместо <style lang = "scss-loader"> попробуйте <style lang = "scss">.

Decade Moon 25.05.2018 06:43
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Symfony Station Communiqué - 17 февраля 2023 г
Symfony Station Communiqué - 17 февраля 2023 г
Это коммюнике первоначально появилось на Symfony Station , вашем источнике передовых новостей Symfony, PHP и кибербезопасности.
Управление ответами api для исключений на Symfony с помощью KernelEvents
Управление ответами api для исключений на Symfony с помощью KernelEvents
Много раз при создании api нам нужно возвращать клиентам разные ответы в зависимости от возникшего исключения.
1
1
1 381
1

Ответы 1

Чтобы иметь возможность использовать SCSS в шаблоне Vue, вам необходимо объявить в одном файловом компоненте следующий блок style:

<!-- Those styles are not scoped to that particular component -->
<style lang = "scss">...</style>
<!-- Or those styles are scoped to that particular component -->
<style lang = "scss" scoped>...</style>

При необходимости вы даже можете использовать их в одном файле.

Вам также необходимо установить правильные зависимости узлов, запустив:

npm install --dev node-sass sass-loader

Затем это должно работать из коробки при использовании в проекте, инициализированном с помощью vue-cli.

Однако вы может понадобиться, чтобы добавить это в конфигурацию вашего webpack 'test', чтобы lang = "scss" работал в тестах при использовании опции? Inject vue-loader:

resolveLoader: {
    alias: {
        'scss-loader': 'sass-loader',
    },
},

Другие вопросы по теме