sass怎么在vue中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创建一个基于webpack模板的新项目
<强>全局安装vue-cli
,美元npm install ——global vue-cli 创建一个基于webpack模板的新项目
,美元vue init webpack 我的项目 <强>安装依赖
,美元cd 我的项目
美元,npm 安装 为了使用sass,我们需要安装sass的依赖包
npm install ——save-dev sass-loader//sass-loader依赖于node-sass
npm install ——save-dev node-sass <强>修改风格标签
打开src目录下的组件目录中的你好。vue文件。
然后修改风格标签如下
& lt; style lang=皊ass"在 然后运行项目
npm run dev 终端显示错误,如下:
,ERROR Failed 用compile with 1,错误
error 拷贝。/src/组件/Hello.vue
Module build 失败:
h2,, h3 {
,,^
,,Invalid CSS after “h2,, h3 {“: expected “}”,, was “{”;
,才能拷贝/用户/fangyongle/my-blogger/src/组件/Hello.vue (line , 36岁,column 9) 错误提示:无效的css。因为萨斯语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法,只要去掉css代码的大括号和分号,即使用缩进语法。
如果你希望使用带大括号的语法,即SCSS
那么,你只要把lang=皊ass"改成lang=皊css"就行了。
<强>引用sass/SCSS文件
举个例子
@import “。/共同/SCSS/mixin"; 千万别忘了分号
否则会报错类似的错误
Module build 失败:,
,# app {
^
,Media query expression must begin with & # 39; (& # 39;
,拷贝/用户/fangyongle/硅碳棒/src/App.vue (line 35岁,column 1)
@ 。/~/vue-style-loader !/~/css-loader !。/~/vue-loader/lib/style-rewriter.js ? id=data-v-0bf489db !。/~/sass-loader !。/~/vue-loader/lib/selector.js ?类型=styles&指数=0 !。/src/App.vue 4:14 - 248, 13:3-17:5 第14章22节- 256 看完上述内容,你们掌握sass怎么在vue中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
