Sass简单使用，嵌套css

• sass官网

• 参考1

• 参考2

• 案例地址

• 案例集成vite2 + vue3 + element plus + sass + ts

• vite项目中使用sass

• 安装sass

npm install --save-dev sass

• 安装到开发依赖
  

• 配置vite.config.js

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
})

• 子组件中使用

<style lang="scss" scoped>
#div_box {
    margin-top: 30px;
    margin-left: 30px;
    border: 1px gray solid;
    height: 500px;
    width: 700px;
    background-color: white;
    border-radius: 5px;
    #div_box_one{
        height: 100px;
        width: 100px;
        background-color: red;
    } 
}
</style>

• 注意是lang="scss"
  

• 如果写成lang="sass"，会报错

[vite:css] Expected newline.
  ╷
2 │ #div_box {
  │          ^
  ╵
  src\components\SassDemo.vue 2:10  root stylesheet
file: D:/gitee_chnq/demo/elementdemo01/src/components/SassDemo.vue?vue&type=style&index=0&scoped=true&lang.sass
Error: Expected newline.
  ╷
2 │ #div_box {
  │          ^
  ╵
  src\components\SassDemo.vue 2:10  root stylesheet
error during build:
Error: Expected newline.
  ╷
2 │ #div_box {
  │          ^
  ╵
  src\components\SassDemo.vue 2:10  root stylesheet
    at Object.wrapException (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:1241:17)
    at SpanScanner.error$3$length$position (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:66267:15)
    at SpanScanner.error$2$position (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:66273:19)
    at SassParser0._sass0$_peekIndentation$0 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:89130:12)
    at SassParser0._sass0$_whileIndentedLower$1 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:89090:84)
    at SassParser0.children$1 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:88874:12)
    at SassParser0._stylesheet0$_withChildren$1$3 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:95153:39)
    at SassParser0._stylesheet0$_withChildren$3 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:95158:19)
    at SassParser0._stylesheet0$_styleRule$2 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:92378:20)
    at SassParser0._stylesheet0$_styleRule$0 (D:\gitee_chnq\demo\elementdemo01\node_modules\sass\sass.dart.js:92381:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! elementdemo01@0.0.0 build: `vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the elementdemo01@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chnq\AppData\Roaming\npm-cache\_logs\2021-12-14T09_40_28_597Z-debug.log