web前端_Vue框架_关于Can't resolve 'sass-loader' in...错误的解决办法

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