微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决无法更正错误,无法以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版本之间存在某种不兼容,尽管我没有找到对此问题的任何参考。希望对您有所帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。