尝试使用单个文件组件在vue项目中设置scss时遇到错误。当我尝试使用<style lang="scss">块时,我当前遇到此错误,但是否则我的项目将按预期工作。
ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
<template>
^
Invalid operator in attribute selector for object
in C:\Users\yanch\OneDrive\Desktop\virtualenvs\agg_site\client\src\App.vue (line 1, column 2)
@ ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&) 4:14-279
@ ./src/App.vue?vue&type=style&index=0&lang=scss&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js
Run Code Online (Sandbox Code Playgroud)
我不是专家,但是此错误使我认为vue-loader规则存在问题。似乎它正在尝试将模板编译为样式块(尽管我可能错了)。这是我的webpack配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader'},
{ test: /\.vue$/, use: 'vue-loader'},
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, …Run Code Online (Sandbox Code Playgroud)