在vue-cli + webpack 项目中使用sass
2020-02-05 16:11
134 查看
1、准备工作:
由于npm的服务器在国外,网速慢而且安装容易失败,建议在安装之前,先安装国内的镜像,比如淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、安装vue-cli
全局安装 vue-cli cnpm install vue-cli -g
3、创建项目
vue init webpack vue-Project //初始化基于webpack模板项目 cd vue-Project cnpm install //安装依赖 cnpm run dev //运行项目
4、在webpcak中配置sass
安装sass-loader, node-sass.因为sass-loader依赖于sass-loader[/code]
cnpm install sass-loader node-sass --save
下载安装完vue-cli和webpcak之后,webpack是没有配置sass-loader的,
需要手动配置一下,
在build
目录下的 文件webpack.base.conf.js下的module规则下配置:
{ test: /\.scss$/, include: '/src/', loaders: ['style-loader', 'css-loader', 'sass-loader'] }
5、在单文件组件中引用
<style scoped lang="scss"> .... </style>
6、重新运行项目, 如果没有编译出错,说明配置成功
npm run dev
转载于:https://www.cnblogs.com/PYiP/p/10065346.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- webpack搭建的vue-cli项目如何使用sass?
- vue-cli生成的项目使用本地手写的webpack-loader
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- vue学习笔记(一)使用npm,webpack,vue-cli搭建vue项目
- vue 使用vue-cli打包工具生成基于webpack模板的项目
- webpack+vue 构建项目步骤并且使用sass 安装配置
- 使用vue-cli创建项目,webpack打包
- 使用vue-cli快速创建vue+webpack项目
- 使用vue-cli webpack 快速搭建项目的代码
- 关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程(自用)
- 用npm安装vue和vue-cli,并使用webpack创建项目的方法
- 超简单使用vue-cli+webpack脚手架来构建vue项目
- Vue2.0使用vue-cli + webpack搭建项目
- 使用webpack构建vue-cli项目,写scss脚本语言报错
- 用npm安装vue和vue-cli,并使用webpack创建项目
- vue-cli项目打包多个与static文件同级的静态资源目录(copy-webpack-plugin插件的使用)
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- vue-cli + webpack + sass 搭建一个工程化项目
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- vuex在vue-cli和webpack构建的项目中的简单使用