1、创建一个基于 webpack 模板的新项目
$ vue init webpack myvue
2、在当前目录下，安装依赖
$ cd myvue
$ npm install
3、安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
4、在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
如下图所示：
这里写图片描述
5、在APP.vue中修改style标签
<style lang="scss">
6、然后运行项目
$ npm run dev
7、修改APP.vue的样式，可以看下效果
这里写图片描述
8、运行结果背景变成灰色吗，说明你已成功配置好sass
这里写图片描述
希望能够帮助更多人....(__) 嘻嘻……**
1、创建一个基于 webpack 模板的新项目 2、在当前目录下，安装依赖（此处应用yarn安装依赖，小伙伴们可以...
1、创建一个基于 webpack 模板的新项目 2、在当前目录下，安装依赖 3、安装sass的依赖包 4、在bui...
Vue配置sass全局变量 配置sass全局变量前置如何引入sass不做介绍遇到问题：在main.js中引入sas...
Vue引入sass并配置全局变量 引入sass 首先使用官方提供的脚手架vue-cli进行搭建框架，这里就不做说明...
1、如何进行sass配置及操作 创建好vue-cli3.x创建好后；新建一个Vue项目；在该项目中使用sass需要...
使用sass中mixin方法 在sass中可以声明@mixin来使用sass的一个规则集中 主要的是,要使用mix...
vue-cli 配置 axios vuex element-ui sass 配置sass || scss 配置ax...
vue-cli中使用sass启动报错 修改 中有关 的配置即可， 更新了
VUE2.0中集成Sass Step1：在项目中安装Sass Step2：配置Sass解析器 PS：不安装的话会出...
安装 使用 vue cli 3 构建的话，默认不需要配置 设置sass全局变量 参考Vue CLI
本文标题：在vue中使用sass的配置的方法
本文链接：https://www.haomeiwen.com/subject/jwihpxtx.html
网友评论