详解Vue2 添加对scss的支持

 更新时间:2019年01月02日 09:59:29   作者:心叶  
这篇文章主要介绍了详解Vue2 添加对scss的支持,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

引入loader

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev  

scss支持

为了使用scss,我们需要先安装相关的node包:

npm install --save style-loader sass-loader node-sass file-loader

安装好之后,为了可以在.vue和.scss中使用,需要在webpack.config.js中配置对应的解析器:

var webpack = require('webpack');
module.exports = {
  entry: ['./src/entry.js'],
  output: {
    path: __dirname,
    filename: 'build/main.js'
  },
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },
  module: {
    loaders: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },{
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      }, {
        test: /\.(png|jpg|jpeg|gif|bmp)$/,
        loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]']
      }
    ]
  }
};

关于上面resolve的配置,是因为编译和打包源文件默认不一样。

测试scss

打开PageTwo.vue测试一下:

<style lang="scss" scoped>
section {
 & > div {
  font-size: 20px;
 }
}
</style>

编译正常。

本篇最终项目文件Github地址:github.com/yelloxing/vue.quick/tree/V6

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

相关文章

  • Vue批量图片显示时遇到的路径被解析问题

    Vue批量图片显示时遇到的路径被解析问题

    这篇文章主要介绍了Vue批量图片显示时遇到的路径被解析问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vant组件中 dialog的确认按钮的回调事件操作

    vant组件中 dialog的确认按钮的回调事件操作

    这篇文章主要介绍了vant组件中 dialog的确认按钮的回调事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3关于时间显示格式化的问题

    vue3关于时间显示格式化的问题

    这篇文章主要介绍了vue3关于时间显示格式化的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    这篇文章主要介绍了Vue 子组件更新props中的属性值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue-cli脚手架搭建方式(vue脚手架方式搭建)

    vue-cli脚手架搭建方式(vue脚手架方式搭建)

    这篇文章主要介绍了vue-cli(vue脚手架方式搭建),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 详解基于 axios 的 Vue 项目 http 请求优化

    详解基于 axios 的 Vue 项目 http 请求优化

    这篇文章主要介绍了详解基于 axios 的 Vue 项目 http 请求优化,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

    vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

    这篇文章主要介绍了vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue 3中的defineEmits()和defineProps()使用小结

    Vue 3中的defineEmits()和defineProps()使用小结

    defineProps()和defineEmits()是Vue 3中Composition API的重要组成部分,它们分别用于定义组件接收的属性和触发的事件,本文给大家介绍Vue 3中的defineEmits()和defineProps()解析,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue2安装vue-router报错的解决方法

    vue2安装vue-router报错的解决方法

    vue-router的安装不是理想化的,会出现问题,需要静下心认真研究,熬过去就会懂得更多,这篇文章主要给大家介绍了关于vue2安装vue-router报错的解决方法,需要的朋友可以参考下
    2022-03-03
  • 在vue中实现嵌套页面(iframe)

    在vue中实现嵌套页面(iframe)

    这篇文章主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论