如何在vue中使用sass
全局安装 vue-clinpm install --global vue-cli创建一个基于 webpack 模板的新项目vue init webpack my-project安装依赖cd my-projectnpm install为了使用sass,我们需要安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sass
·
全局安装 vue-cli
npm install --global vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack my-project
安装依赖
cd my-project
npm install
为了使用sass,我们需要安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
修改style标签
打开src目录下的components目录中的Hello.vue文件。
然后修改 style标签如下
<style lang="sass">
然后运行项目
npm run dev
终端显示错误,如下:
错误提示:无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法,只要去掉css代码的大括号和分号,即使用缩进语法。
如果你希望使用带大括号的语法,即SCSS
那么,你只要把lang=”sass”改成lang=”scss”就行了。
引用sass/scss 文件
举个例子
@import "./common/scss/mixin";
千万别忘了分号
否则会报错类似的错误
更多推荐
已为社区贡献21条内容
所有评论(0)