scss的简易用法(有多个scss)

一、 在vue-cli中的用法

1. 自己配置scss建立以下目录：

css ---------------------------放置所有scss
------src ----------------------放所有HTML或者组件对应的scss
------------index.scss ----- HTML或者组件对应的scss
------------common.scss --HTML或者组件对应的scss
----- app.csss ---------------总的scss文件

如下图：

vue中.png

2、app.scss中

@import 'src/common';
@import 'src/index';

3. 在app.vue中引入

<style lang="scss">
@import './components/css/app.scss';
</style>

二、 没有用vue的用法：

1. 自己配置scss建立以下目录：

css ---------------------------放置所有scss
------src ----------------------放所有HTML或者组件对应的scss
------------index.scss ----- HTML或者组件对应的scss
------------common.scss --HTML或者组件对应的scss
----- app.csss ---------------总的scss文件

如下图：

没有用vue.png

2、app.scss中

@import 'src/common';
@import 'src/index';

3. 在用到scss的html中引入

<link rel="stylesheet" href="../css/app.css">