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

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

因为在Vue+element UI（不会推荐去Element UI官网看看）项目中需要用到<style lang="scss">，发现每次都会报错，在网上找了一些解决办法也比较乱，下面是我在遇到这个问题的一种解决办法：

在Chrome浏览器中的错误：

就是不能解析sass-loader 这种东西。 

第一步，需要在项目中引入

npm install sass-loader -D

引入成功显示

第二步引入

npm install node-sass -D

引入成功

第三步就可以运行项目了

如果你还不行那可能就需要去webpack.config.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
            }]
        }]
    }
};