web前端_Vue框架_关于Can't resolve 'sass-loader' in...错误的解决办法
CodeChenL
因为在Vue2+element UI(不会推荐去Element UI官网看看)项目中需要用到<style lang="scss">,发现每次都会报错,在网上找了一些解决办法也比较乱,下面是我在遇到这个问题的一种解决办法:
在Chrome浏览器中的错误:
就是不能解析sass-loader 这种东西。
所以第一步需要在项目中引入:
npm install sass-loader -D
1
npm install node-sass -D
1
第一个很快引入成功:
但是在第二个却出了错误:
但是我再用cnpm install node-sass -D 却成功了!!!(现在比较渣,也不知道是什么原因)
这样项目就能够成功运行了:
如果你还不行那可能就需要去webpack.base.conf.js中的module:的rules:[ ] 下最后添加试试(反正我是没有用):
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader',
sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
},
},
},
下面是官方Sass Loader的引入方法Sass Loade官方仓库:
npm install sass-loader node-sass webpack --save-dev
npm install style-loader css-loader --save-dev
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};
————————————————
版权声明:本文为CSDN博主「CodeChenL」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_24058693/article/details/80056557