Vue项目引入sass

最新推荐文章于 2024-06-18 10:23:40 发布

weixin_34344403

最新推荐文章于 2024-06-18 10:23:40 发布

阅读量391

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/secretAngel/p/10620879.html

版权

　　最近两天手头的事情暂时搞完了，可以抽出空来学习一下东西，之前项目都是鹏哥搭建好了，我们在直接在里面写代码，sass语法用来写样式还是比较方便常用的，今天就来试试怎么引入和配置sass

（1）首先是先用vue-cli构建一个新的vue项目

　　① 安装node

　　② node安装好后安装脚手架：npm install -g vue-cli

　　③ 构建vue项目：vue init webpack vue_exercise

　　④ 进入项目根目录，把项目运行起来：npm run dev

（2）安装sass

　　① npm install node-sass --save-dev

　　② npm install sass-loader --save-dev

　　如果网络不好，会导致安装失败，这时需要从淘宝镜像安装node-sass,

　　npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）

　　cnpm install node-sass --save （使用淘宝镜像安装node-sass）

（3）配置sass编译

　　打开根目录下build/webpack.base.config.js，在modules对象的rules数组中加入一个对象，如下：

module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader',
      }
    ]
}

　　看了下大佬的说法，loader: 'style-loader!css-loader!postcss-loader!sass-loader'主要针对vue1.0版本可用，在vue2.0中测试了下也是可以的，在vue 2.0 的sass配置也可以如下这样：

{
    test: /\.scss$/,
    loader: ['style', 'css', 'sass']
},

　　保存一下，然后去在组件中试了下sass语法已经可以正常编译了，nice，学了个好玩的东西...

转载于:https://www.cnblogs.com/secretAngel/p/10620879.html

关注