vue2配置scss的方法步骤

 更新时间:2019年06月06日 09:46:01   作者:zxc19890923  
这篇文章主要介绍了vue2配置scss的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1、安装文件

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

2、配置 webpack.base.conf.js

找到webpack.base.conf.js文件的module模块下面的rules添加以下代码

...
{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
},
...

注意:这里loaders和文件中其他配置不同加了s

3、使用

1、在使用的地方如下写法

<style lang="scss" scoped>
  div {
    a {
      color: red
     }
    }
</style>

2、@import外部导入,如果不加scoped如果在app.vue中导入那么就是全局scss

<style lang="scss" scoped>
 @import './assets/scss/global.scss';
 * {
  color: red
 }
</style>

这样写下面的覆盖外部引入的

注意遇到的坑

报错

/node-sass/vendor no such file or directory in node-sass......

解决方法,运行 rebuild解决了

npm/cnpm rebuild node-sass --save-dev

更详细的解决方案如下:

根据package.json,进行npm install node_modules, 运行npm run dev时候,报错,错误如下.


查看node_modules文件夹,发现,并无vender 文件夹.如下图:


解决办法:

上图node-sass文件夹下,新建 vender 文件夹.然后运行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夹,如下图所示:


就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 关于Vue 自定义指令实现元素拖动的详细代码

    关于Vue 自定义指令实现元素拖动的详细代码

    这篇文章主要介绍了Vue 自定义指令实现元素拖动,在使用自定义指令之前,先对自定义指令有一定的了解,主要从自定义指令定义范围,钩子函数方面入手,需要的朋友可以参考下
    2022-01-01
  • vue组件中的数据传递方法

    vue组件中的数据传递方法

    这篇文章主要介绍了vue组件中的数据传递方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • 修改Vue打包后的默认文件名操作

    修改Vue打包后的默认文件名操作

    这篇文章主要介绍了修改Vue打包后的默认文件名操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • uniapp使用uview的简单案例

    uniapp使用uview的简单案例

    uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下
    2023-03-03
  • 使用vue深度选择器修改ElementUI组件内样式的示例代码

    使用vue深度选择器修改ElementUI组件内样式的示例代码

    在带有scoped属性的style中书写样式时,无法作用影响到子组件中的样式,此时我们会使用到deep深度选择器,来解决此问题,我们在使用less预处理器,能正常使用,但是在scss预处理器中会报错,下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下
    2022-12-12
  • 如何解决el-checkbox选中状态更改问题

    如何解决el-checkbox选中状态更改问题

    这篇文章主要介绍了如何解决el-checkbox选中状态更改问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 详解在Vue中如何使用provide与inject

    详解在Vue中如何使用provide与inject

    在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,解决的是跨组件(祖孙)间通信的一种方式,本文就来聊聊它们在Vue中具体的使用吧
    2023-03-03
  • 一个基于vue3+ts+vite项目搭建初探

    一个基于vue3+ts+vite项目搭建初探

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了一个基于vue3+ts+vite项目搭建的相关资料,需要的朋友可以参考下
    2022-05-05
  • 在vue-cli 3中给stylus、sass样式传入共享的全局变量

    在vue-cli 3中给stylus、sass样式传入共享的全局变量

    这篇文章主要介绍了在vue-cli 3中, 给stylus、sass样式传入共享的全局变量,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 解决electron打包vue-element-admin项目页面无法跳转的问题小结

    解决electron打包vue-element-admin项目页面无法跳转的问题小结

    这篇文章主要介绍了解决electron打包vue-element-admin项目页面无法跳转的问题小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03

最新评论