How to install and use vue stylus (error reporting)

First the original website : https://stylus-lang.com/docs/mixins.html

One, install stylus

cnpm install stylus --save-dev

Second, the installation complete screenshot

Insert picture description here
Three, check the installation is successful

stylus -V

Insert picture description here

Fourth, install stylus-loader

cnpm install stylus stylus-loader --save-dev

Insert picture description here
Five, modify webpack.base.conf.js

{
        test:/.scss$/,
        loader:'style-loader!css-loader!scss-loader'
      },
      {
        test:/\.css$/,
        loader:'style-loader!css-loader!stylus-loader'
      }

Insert picture description here
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>

Insert picture description here
Effect screenshot
Insert picture description here

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

Guess you like

Origin blog.csdn.net/weixin_42645716/article/details/112918453