vue2项目使用sass的示例代码
作者:每天都要进步一点点 时间:2024-04-26 17:39:16
1,使用save会在package.json中自动添加。
npm install node-sass --save-dev
npm install sass-loader --save-dev
注:
通常使用npm安装会出现以下报错,安装失败。(网路问题)
可以通过淘宝的npm镜像安装node-sass,解决以上问题。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)
$ cnpm install node-sass --save (使用淘宝镜像安装node-sass)
2.进入webpack.base.config.js 配置scss module -- loaders (vue1.0)
$ npm install --save-dev sass-loader style-loader css-loader
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
}
}
}
打开webpack.base.config.js在loaders里面加上 module -- rules (vue2.0)
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
3.如果需要在vue文件style标签使用scss的话,需要声明一下:
vue1.0
<style rel="stylesheet/scss" lang="scss"></style>
vue2.0
<style lang="scss" scoped="" type="text/css"></style>
来源:http://www.cnblogs.com/crazycode2/p/6535105.html
标签:vue,sass
0
投稿
猜你喜欢
matplotlib 范围选区(SpanSelector)的使用
2023-08-22 14:34:56
python进程池实现的多进程文件夹copy器完整示例
2021-04-27 13:05:26
如何利用Python识别图片中的文字
2022-04-05 03:15:42
浅谈python中的__init__、__new__和__call__方法
2023-01-05 21:21:03
分享Pytest fixture参数传递的几种方式
2023-06-15 01:25:28
python 编码规范整理
2023-05-20 10:14:44
python调用动态链接库的基本过程详解
2023-05-31 13:24:00
sqlserver 中时间为空的处理小结
2011-11-03 17:16:17
python实现两张图片拼接为一张图片并保存
2023-01-26 17:56:52
python中字符串变二维数组的实例讲解
2021-08-03 04:37:56
Python学习之面向对象编程详解
2023-10-12 18:48:46
JavaScript 解析 Cookie 的函数
2007-11-08 11:58:00
Sql Server 和 Access 操作数据库结构Sql语句
2008-02-11 18:59:00
Python读取实时数据流示例
2023-09-11 14:20:00
SQL中位数函数实例
2024-01-25 17:21:55
python猜数字小游戏实现代码
2022-04-20 19:01:43
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2024-04-23 09:30:40
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2023-01-16 15:17:39
python绘制已知点的坐标的直线实例
2023-03-12 08:36:11
PHP获取类私有属性的3种方法
2023-11-20 10:32:16