First the original website : https://stylus-lang.com/docs/mixins.html
One, install stylus
cnpm install stylus --save-dev
Second, the installation complete screenshot
Three, check the installation is successful
stylus -V
Fourth, install stylus-loader
cnpm install stylus stylus-loader --save-dev
Five, modify webpack.base.conf.js
{
test:/.scss$/,
loader:'style-loader!css-loader!scss-loader'
},
{
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader'
}
Six, modify package.json
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
Seven, use
<template>
<div id="app">
<div class="menu">
<h1>这是一行文字</h1>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
#app
font-family: 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-align: center
color: #2c3e50
margin-top: 60px
.menu
color :red
</style>
Effect screenshot
Note: After the normal installation, it should be ready to use. Steps 5 and 6 may be omitted.
After these steps, the console keeps reporting errors. You can delete the node_modules file and re-execute npm install