小编Rya*_*Yan的帖子

使用自定义Webpack配置使用scss块编译Vue.js单文件组件时出错

尝试使用单个文件组件在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)

javascript webpack vue.js vue-loader

5
推荐指数
0
解决办法
181
查看次数

标签 统计

javascript ×1

vue-loader ×1

vue.js ×1

webpack ×1