symfony - 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 项目。
解决方案
为了能够在 Vue 模板中使用 SCSS,您需要在单个文件组件中声明以下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
.
但是,当使用 vue-loader 的 ?inject 选项时,您可能需要在 webpack 'test' 配置中添加它以在测试中工作:lang="scss"
resolveLoader: {
alias: {
'scss-loader': 'sass-loader',
},
},
推荐阅读
- javascript - Angular 8 Form Array控件不适用于选择
- reactjs - 如何测试在 React、Jest、Enzyme 中作为 props 传递的函数
- javascript - 如何修复 - 未处理的拒绝 (TypeError)。Promise.allSettled 不是函数
- django - 如何在Django的模型中验证一个字段?
- flutter - 由于 Listview,BottomBar 不会保持堆栈
- animation - SwiftUI:过渡和动画修饰符的不同动画
- flutter - 如何获取网络 DateTime.Now()?
- r - 在 ggplot2 中使用小字体
- stdout - 如何(临时)捕获标准输出
- html - 如何在 mojolicious 中使用 perl 循环生成表中的行数和列数?