vue.js - vue 单文件组件中 sass 模板的 Webpack 编译问题
问题描述
我正在从 webpack 2 升级到 webpack-4。它在我的 vue 单文件组件中包含 sass 模板的地方出现故障。
当文件扩展名为 vue 时，sass loader 似乎没有出现。
我尝试在 webpack 配置中添加 sass 作为扩展，但它开始将 vue 文件视为 sass 文件并且编译开始中断。
这是生成的错误。
所有有错误的文件在 vue SFC 中都有 sass 模板。
ERROR in ./public/vue/applicationform/Academic.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Academic.vue?vue&type=style&index=0&lang=sass&) 51:0
Module parse failed: Unexpected character '#' (51:0)
You may need an appropriate loader to handle this file type.
|
|
> #situation
| font-family: 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing: antialiased
@ ./public/vue/applicationform/Academic.vue?vue&type=style&index=0&lang=sass& 1:0-135 1:151-154 1:156-288 1:156-288
@ ./public/vue/applicationform/Academic.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=script&lang=js&
@ ./public/vue/applicationform/App.vue?vue&type=script&lang=js&
@ ./public/vue/applicationform/App.vue
@ ./public/vue/applicationform.js
ERROR in ./public/vue/applicationform/Workex.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Workex.vue?vue&type=style&index=0&lang=sass&) 715:0
Module parse failed: Unexpected character '#' (715:0)
You may need an appropriate loader to handle this file type.
|
|
> #situation
| font-family: 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing: antialiased
@ ./public/vue/applicationform/Workex.vue?vue&type=style&index=0&lang=sass& 1:0-133 1:149-152 1:154-284 1:154-284
@ ./public/vue/applicationform/Workex.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=script&lang=js&
@ ./public/vue/applicationform/App.vue?vue&type=script&lang=js&
@ ./public/vue/applicationform/App.vue
@ ./public/vue/applicationform.js
ERROR in ./public/vue/applicationform/Kra.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Kra.vue?vue&type=style&index=0&lang=sass&) 73:0
Module parse failed: Unexpected character '#' (73:0)
You may need an appropriate loader to handle this file type.
|
|
> #situation
| font-family: 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing: antialiased
@ ./public/vue/applicationform/Kra.vue?vue&type=style&index=0&lang=sass& 1:0-130 1:146-149 1:151-278 1:151-278
@ ./public/vue/applicationform/Kra.vue
@ ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=script&lang=js&
@ ./public/vue/applicationform/App.vue?vue&type=script&lang=js&
@ ./public/vue/applicationform/App.vue
@ ./public/vue/applicationform.js
ERROR in ./public/vue/applicationform/App.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=style&index=0&lang=sass&) 1062:0
Module parse failed: Unexpected token (1062:0)
You may need an appropriate loader to handle this file type.
|
|
> .passive-day
| pointer-events: none;
| #app
@ ./public/vue/applicationform/App.vue?vue&type=style&index=0&lang=sass& 1:0-130 1:146-149 1:151-278 1:151-278
@ ./public/vue/applicationform/App.vue
@ ./public/vue/applicationform.js
ERROR in ./public/vue/onboard/Onboard.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/onboard/Onboard.vue?vue&type=style&index=0&lang=sass&) 1065:0
Module parse failed: Unexpected token (1065:0)
You may need an appropriate loader to handle this file type.
|
|
> .cov-datepicker:hover
| border: 2px solid #d3d3d3 !important;
| .cov-datepicker:focus
@ ./public/vue/onboard/Onboard.vue?vue&type=style&index=0&lang=sass& 1:0-134 1:150-153 1:155-286 1:155-286
@ ./public/vue/onboard/Onboard.vue
@ ./public/vue/onboard.js
ERROR in ./public/vue/reconboard/RecOnboard.vue?vue&type=style&index=1&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/reconboard/RecOnboard.vue?vue&type=style&index=1&lang=sass&) 1090:0
Module parse failed: Unexpected token (1090:0)
You may need an appropriate loader to handle this file type.
|
|
> .class1
| background-color: red;
| .class2
@ ./public/vue/reconboard/RecOnboard.vue?vue&type=style&index=1&lang=sass& 1:0-137 1:153-156 1:158-292 1:158-292
@ ./public/vue/reconboard/RecOnboard.vue
@ ./public/vue/reconboard.js
ERROR in ./public/vue/console/Console.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/console/Console.vue?vue&type=style&index=0&lang=sass&) 1787:0
Module parse failed: Unexpected token (1787:0)
You may need an appropriate loader to handle this file type.
|
|
> .class1
| border: solid !important
| border-color: red !important
@ ./public/vue/console/Console.vue?vue&type=style&index=0&lang=sass& 1:0-134 1:150-153 1:155-286 1:155-286
@ ./public/vue/console/Console.vue
@ ./public/vue/editp.js这是我的 webpack 配置文件
module.exports = {
mode : process.env.NODE_ENV || 'development',
context: __dirname + "/public/vue",
entry: {kras: "./applicationform.js", edit: "./editp.js", reconboard: "./reconboard.js", jobpost: "./jobPost.js", register: "./register.js",
onboard: "./onboard.js", signin: "./signin.js", recdash : "./recDash.js", consent : "./consent.js", onboardconsent : "./onboardconsent.js",
projectscreen: "./projectscreen.js" },
plugins: [
new CleanWebpackPlugin(['public/dist']),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].bundle.js",
chunkFilename: "[name].[chunkhash].js"
}),
],
output: {
path: __dirname + "/public/dist",
filename: "[name].bundle.js",
chunkFilename: "[name].[chunkhash].js"
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
plugins : ['lodash'],
}
},
{
test: /\.pug$/,
oneOf: [
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
}
],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(scss|css)$/,
oneOf: [
{
resourceQuery: /lang=sass/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
]
},
{
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
{
test: /\.vue$/,
loader : 'vue-loader',
options : {
loaders : {
scss: 'vue-style-loader!css-loader!sass-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
}
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.jsx', '.css'],
modules: [
__dirname + '/public/vue',
'./node_modules'
]
},
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 3000,
disableHostCheck: true,
hot: true
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
minimizer: [new UglifyJsPlugin()]
}
}这是我的vue代码
<template lang="pug">
// My pug Code over her
</template>
<script>
// My script over here
</script>
<style lang="sass">
#app
font-family: 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-align: center
color: #2c3e50
margin-top: 60px
h1, h2
font-weight: normal
ul
list-style-type: none
padding: 0
li
display: inline-block
margin: 0 10px
a
color: #42b983
.list-enter-active, .list-leave-active
transition: all 1s
.list-enter, .list-leave-to
opacity: 0
transform: translateY(30px)
</style>解决方案
推荐阅读
- django - 更改 Wagtail 页面所有者的“一次性”方法
- linux - 替换两列linux
- excel - Excel VBA - 检查日期是否在动态范围内，如果它们具有匹配的名称和标题，然后采取纠正措施
- javascript - 如何使用纯 Javascript 在 webview 应用程序中捕获后退箭头按钮？
- javascript - 将图像数据 URI（base64）设置为画布背景
- email - 如何使用命令'mail'从Unix发送带有不同颜色文本的邮件？
- c# - IPointerClickHandler Unity 的几个问题
- travis-ci - Puppeteer Travis-CI chrome-headless 不工作
- kong - Kong 自定义错误消息/响应
- r - 在 R 中循环遍历列表并连接字符串（语法）