Question

我正在设置一个新项目，我选择了Symfony 4，并尝试使用Encore包装器进行webpack。我正在尝试使用我上网的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>

感谢任何建议！

Symfony Encore Webpack - 意想不到的角色'@'

0 个答案: