vue2使用ts写法
设置vue.config.js文件
1 module.exports = { 2 css: { 4 loaderOptions: { 5 scss: { 6 prependData: '@import "./src/assets/css/variables.scss";' 7 } 8 } 9 } 10 }
创建一个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文件名结尾才能使用模块的方式)
1 .login{ 2 font-size: 32px; 3 .test{ 4 color: red; 5 } 6 } 7 8 .user-name{ 9 font-size: 22px; 10 color: #20a0ff; 11 }