Symfony Encore Webpack - неожиданный символ '@' - PullRequest
Новая
       7

Symfony Encore Webpack - неожиданный символ '@'

0 голосов
/ 07 июня 2018

Я настраиваю новый проект и выбрал Symfony 4 и пытаюсь использовать оболочку Encore для веб-пакета.Я пытаюсь использовать шаблон администратора Vuejs, который я получил в Интернете.Я почти уверен, что мне не хватает плагина или у меня есть конфигурация.

Ошибка Webpack: 

ERROR  Failed to compile with 1 errors                                                                                                                      17:10:48

 error  in ./assets/App.vue?vue&type=style&index=0&lang=scss-loader

Module parse failed: Unexpected character '@' (17:0)
You may need an appropriate loader to handle this file type.
| /* 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/';*/

 @ ./assets/App.vue?vue&type=style&index=0&lang=scss-loader 1:0-130 1:151-278
 @ ./assets/App.vue
 @ ./assets/main.js

Это мой текущий вызов на бис webpack.config.js: 

var Encore = require('@symfony/webpack-encore');
const { VueLoaderPlugin } = require('vue-loader')

const util = require('util');

Encore
    .setOutputPath('public_html/build/')
    .setPublicPath('/build')
    .addEntry('vendor', './assets/js/vendor.js')
    .addEntry('main', './assets/main.js')
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableVueLoader()
    // allow sass/scss files to be processed
    .enableSassLoader()
    .enablePostCssLoader()
    .addPlugin(new VueLoaderPlugin())
;

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

let config = Encore.getWebpackConfig();
config.module.rules.forEach(function(r){
    console.log(util.inspect(r, false, null))
})
config.resolve.extensions = ['.js', '.vue', '.json']
config.resolve.alias = {
    'vue$': 'vue/dist/vue.esm.js'
};
module.exports = config;

И последнее, но самое меньшее, это мой маленький App.vue, которыйвид устанавливает CSS для всего компонента / приложения. 

<template>
  <div>
    <router-view></router-view>
  </div>
</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>

Любые предложения приветствуются!

...