1,使用保存会在package.json中自动添加。
npm安装node-sass——save-dev npm安装sass-loader——save-dev >之前 注:
通常使用npm安装会出现以下报的错,安装失败。(网路问题)
可以通过淘宝的npm镜像安装node-sass,解决以上问题。
美元npm安装- g cnpm——注册表=https://registry.npm.taobao.org(安装淘宝镜像) 美元cnpm安装node-sass——保存(使用淘宝镜像安装node-sass) >之前2。进入webpack.base.config。js配置scss ,模块——加载器(vue1.0)
美元npm安装——save-dev sass-loader style-loader css-loader{ 测试:/\ .vue/美元, 装载机:“vue-loader”, 选择:{ 加载器:{ “scss”:“style-loader css-loader ! sass-loader” } } } >之前打开webpack.base.config.js在加载器里面加上,模块——规则(vue2.0)
规则:[ { 测试:/\ .vue/美元, 装载机:“vue-loader”, 选择:vueLoaderConfig }, { 测试:/\ . js/美元, 装载机:“babel-loader”, 包括:[解决(src),解决(测试)] }, { 测试:/\。(png | jpe # 63; g | gif | svg)(\ & # 63;。*) & # 63;美元/, 装载机:“url-loader”, 查询:{ 限制:10000 名称:utils.assetsPath (“img/[名字]。[散列:7]。[ext]”) } }, { 测试:/\ .scss/美元, 加载器:(“风格”,“css”,“萨斯”) }, { 测试:/\。(woff2& # 63; |测试结束| ttf |传递)(\ & # 63;。*)& # 63;美元/, 装载机:“url-loader”, 查询:{ 限制:10000 名称:utils.assetsPath(“字体/[名字]。[散列:7]。[ext]”) } } ] } >之前3。如果需要在vue文件风格标签使用scss的话,需要声明一下:
vue1.0
& lt;风格rel="样式表/scss“lang=皊css祝辞& lt;/style>>之前vue2.0
& lt;风格lang=" scss "作用域=" type=" text/css "祝辞& lt;/style>>之前以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
vue2项目使用sass的示例代码