vue2使用ts寫法

設置vue.config.js文件

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: '@import "./src/assets/css/variables.scss";'
            }
        }
    }
}

 

創建一個Login.tsx文件

import {Component, Vue} from 'vue-property-decorator';
// @ts-ignore
import css from './login.module.scss';

@Component({
  components: {},
})

export default class Login extends Vue {
  public onSubmit() {
    console.log('onSubmit')
  }
  onClear() {
    console.log('onClear')
  }
  render() {
    return (
      <div class={css.login}>
        <el-form>
          <el-form-item>
            <el-button class={css['user-name']} type="primary" onclick={this.onSubmit}>
              立即創建
            </el-button>
            <el-button onclick={this.onClear}>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    )
  }
}

 

 

創建一個login.module.scss文件（注意樣式文件必須已.module文件名結尾才能使用模塊的方式）

.login{
  font-size: 32px;
  .test{
    color: red;
  }
}

.user-name{
  font-size: 22px;
  color: #20a0ff;
}