vue 安装scss 运行vue项目报错

Posted 2023-03-28

参考技术A 1、 安装

npm install sass-loader@6.0.0 node-sass --save-dev

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置



    test: /\.sass$/,

    loaders: ['style', 'css', 'sass']

,

3.vue组件引入

<style lang="scss"></style>

报错截图

原因:

webpack-dev-server版本和vue版本不一样，需要将webpack-dev-server卸载了，安装对应版本

解决方法：

1 查看vue-cli版本是 vue -V

2 卸载npm uninstall webpack-dev-server

3 安装npm i webpack-dev-server@3.0.0

4 安装npm install webpack cli -D

5 正常启动。

报错截图

npm install --legacy-peer-deps 即可成功安装 node_modules

webpack 3.6.0 对应版本应安装

npm i sass-loader@7.1.0 -D

npm install node-sass@4.14.1 -D

npm i sass-loader node-sass -D 安装最新版本的 提示报错如下

vue项目中使用scss出错解决方法

vue 使用scss报错 this.getOptions is not a function

通过npm安装sass

npm install node-sass
npm intall sass-loader

上面命令安装的是最新版的，出现错误的原因就是安装最新版的导致不兼容

解决方案就是卸载sass-loader以及node-sass，安装低版本，命令如下

npm uninstall sass-loader //卸载
npm install sass-loader@8.0.0  //安装8.0
npm uninstall node-sass //卸载
 npm install node-sass@4.14.1