无法更正错误，无法以vue样式加载<lang =“ scss”>

问题描述

我正在使用webpackconfig开发应用程序，已经安装了“ sass-loader”和“ node-sass”，并尝试了在webpack官方文档和其他Web参考中找到的所有不同配置，以加载scss和i无法解决以下错误

ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-311067c8","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/devis/animal.vue
ERROR in ./src/main.js
Module not found: Error: Can't resolve 'style-loader,css-loader,sass-loader' in 'C:\Users\juan.urra\Desktop\pricing_3108'
 @ ./src/main.js 9:0-46
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 

这是我的package.json

{
  "name": "vue-cli","description": "A Vue.js project","version": "1.0.0","author": "","license": "MIT","private": true,"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules","serve": "vue-cli-service serve"
  },"dependencies": {
    "axios": "^0.19.2","bootstrap": "^4.5.2","bootstrap-vue": "^2.16.0","vue": "^2.5.11","vue-mq": "^1.0.1","vue-router": "^3.3.4","vue-style-loader": "^4.1.2","vuelidate": "^0.7.5","vuex": "^3.5.1"
  },"browserslist": [
    "> 1%","last 2 versions","not ie <= 8"
  ],"devDependencies": {
    "babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-env": "^1.6.0","babel-preset-stage-3": "^6.24.1","cross-env": "^5.0.5","css-loader": "^0.28.7","file-loader": "^1.1.11","less": "^3.12.2","less-loader": "^7.0.0","node-sass": "^4.14.1","sass": "^1.26.10","sass-loader": "^9.0.3","style-loader": "^1.2.1","stylus": "^0.54.8","stylus-loader": "^3.0.2","vue-loader": "^13.0.5","vue-template-compiler": "^2.4.4","webpack": "^3.12.0","webpack-dev-server": "^2.9.1"
  }
}

这是我的webpack.config

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',output: {
    path: path.resolve(__dirname,'./dist'),publicPath: '/dist/',filename: 'build.js'
  },module: {
    rules: [
      {
        test: /\.css$/,use: [
          'vue-style-loader','css-loader'
        ],},{
        test: /\.scss$/,'css-loader','sass-loader'
        ],{
        test: /\.sass$/,'sass-loader?indentedSyntax'
        ],{
        test: /\.vue$/,loader: 'vue-loader',options: {
          loaders: {
            'scss': [
              'vue-style-loader','sass-loader'
            ],'sass': [
              'vue-style-loader','sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },{
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,use: [
          {
            loader: 'file-loader',options: {
              name: '[name].[ext]',outputPath: 'fonts/'
            }
          }
        ]
      },{
        test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/
      },{
        test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },watch: true,resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },extensions: ['*','.js','.vue','.json']
  },devServer: {
    historyApiFallback: true,noInfo: true,overlay: true
  },performance: {
    hints: false
  },devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',BASE_URL_API: '"https:///"',USER: '"j.doe1"',PASSWORD: '"password"',PAYMENT_URL: '"https:///"'
      }
    }),new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,compress: {
        warnings: false
      }
    }),new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
} else {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',PAYMENT_URL: '"https:///"'
      }
    })
  ])
}

当我在样式标签中引用lang“ scss”时，错误就会跳转

我应该在main.js中进行任何引用吗？在任何参考资料中我都没有看到任何有关它的信息

我陷入了这个错误，无法以任何方式解决它！可以让我看到错误的人！ 预先致以问候和感谢，感谢您的宝贵时间和帮助

解决方法

尝试了我在网上找到的所有解决方案后，没有看到错误，我发现了一个github存储库，该存储库的结构与我的相似，并查看了package.json，我发现唯一的区别是'sass-加载程序”。默认情况下，我的是最后一个版本，而您的是较旧的版本，因此我将版本下载到您的版本中，问题已解决。我知道webpack和sass loader版本之间存在某种不兼容，尽管我没有找到对此问题的任何参考。希望对您有所帮助。