vue 安装scss 运行vue项目报错

html-css011

vue 安装scss 运行vue项目报错,第1张

1、 安装

npm install [email protected] 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 [email protected]

4 安装npm install webpack cli -D

5 正常启动。

报错截图

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

webpack 3.6.0 对应版本应安装

npm i [email protected] -D

npm install [email protected] -D

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

我的项目中引入import 'element-ui/lib/theme-chalk/index.css'会报警告

警告导致引入后的样式如下,这是不正确的效果。

警告如下:

意思是:elementui已经有了content的属性,请放弃覆盖他

解决:

原因在于vw适配,导致第三方ui库有问题

找到.postcssrc.js

删除 postcss-viewport-units 对象

这样运行就不会报错了。