详解如何在vue中使用sass
时间：2021-06-18 08:45:33|栏目：vue|点击： 次
创建一个基于 webpack 模板的新项目
全局安装 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
终端显示错误，如下：
ERROR Failed to compile with 1 errors
error in ./src/components/Hello.vue
Module build failed:
h1, h2 {
^
Invalid CSS after "h1, h2 {": expected "}", was "{"
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)
错误提示：无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang="sass"改成lang="scss"就行了。
引用sass/scss 文件
举个例子
@import "./common/scss/mixin";
千万别忘了分号
否则会报错类似的错误
Module build failed:
#app {
^
Media query expression must begin with '('
in /Users/fangyongle/elema/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?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256
好了，在vue项目中使用sass就这么简单
上一篇：vue 图片裁剪上传组件的实现
栏 目：vue
下一篇：vue之父子组件间通信实例讲解(props、$ref、$emit)
本文标题：详解如何在vue中使用sass
本文地址：http://www.codeinn.net/misctech/144033.html
