如何在vue中使用sass

1.打开项目终端，安装sass的依赖包

npm install --save-dev sass-loader   //sass-loader依赖于node-sass

npm install --save-dev node-sass

2.在build文件夹下的webpack.base.conf.js的rules里面添加以下配置

{

  test: /\.sass$/,

  loaders: ['style', 'css', 'sass']

}

3.在组件中修改style标签

然后修改 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)作者：在下贼溜链接：https://www.jianshu.com/p/67f52071657d來源：简书简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

错误提示：无效的css。因为sass语法不使用大括号和分号。

如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。

如果你希望使用带大括号的语法，即SCSS

那么，你只要把lang="sass"改成lang="scss"就行了。

---

引用sass/scss 文件

举个例子

@import"./common/scss/mixin";

千万别忘了分号

否则会报错类似的错误