如何解决无法更正错误,无法以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:///"'
}
})
])
}
我应该在main.js中进行任何引用吗?在任何参考资料中我都没有看到任何有关它的信息
我陷入了这个错误,无法以任何方式解决它!可以让我看到错误的人! 预先致以问候和感谢,感谢您的宝贵时间和帮助
解决方法
尝试了我在网上找到的所有解决方案后,没有看到错误,我发现了一个github存储库,该存储库的结构与我的相似,并查看了package.json,我发现唯一的区别是'sass-加载程序”。默认情况下,我的是最后一个版本,而您的是较旧的版本,因此我将版本下载到您的版本中,问题已解决。我知道webpack和sass loader版本之间存在某种不兼容,尽管我没有找到对此问题的任何参考。希望对您有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。