0
<style lang="stylus" scoped rel="stylesheet/stylus">

@import "~common/stylus/variable"

  #app
    color:$color-theme

</style>

我在一些代码中看到有人这样使用,我猜测这可能是一种自动化的路径代替

但是我自己使用却报错了

必须换成

@import "./common/stylus/variable"

才能生效,我想知道这东西应该如何去使用

下面是报错提示

Module build failed: Error: C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\src\App.vue:15:9
   11| </script>
   12|
   13| <style lang="stylus" scoped rel="stylesheet/stylus">
   14|
   15| @import "~common/stylus/variable"
---------------^
   16|
   17|   #app
   18|     color:$color-theme

failed to locate @import file ~common/stylus/variable.styl

    at CachedPathEvaluator.visitImport (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus-loader@3.0.1@stylus-loader\lib\evalua
tor.js:157:21)
    at CachedPathEvaluator.Visitor.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\index.js:
28:40)
    at CachedPathEvaluator.Evaluator.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\evaluat
or.js:160:18)
    at CachedPathEvaluator.Evaluator.visitRoot (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\eva
luator.js:707:27)
    at CachedPathEvaluator.Visitor.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\index.js:
28:40)
    at CachedPathEvaluator.Evaluator.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\evaluat
or.js:160:18)
    at CachedPathEvaluator.Evaluator.evaluate (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\eval
uator.js:247:15)
    at Renderer.render (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\renderer.js:86:26)
    at C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus-loader@3.0.1@stylus-loader\index.js:165:12
    at tryCatchReject (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:840:30)
    at runContinuation1 (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:799:4)
    at Fulfilled.when (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:590:4)
    at Pending.run (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:481:13)
    at Scheduler._drain (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\Scheduler.js:62:19)
    at Scheduler.drain (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)

 @ ./~/_vue-style-loader@3.0.2@vue-style-loader!./~/_css-loader@0.28.7@css-loader?{"minimize":false,"sourceMap":false}!./~/_vue-loader@13.0.4@vue-loa
der/lib/style-compiler?{"vue":true,"id":"data-v-19b3b84a","scoped":true,"hasInlineConfig":false}!./~/_stylus-loader@3.0.1@stylus-loader?{"sourceMap":
false}!./~/_vue-loader@13.0.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-454 13:3-17:5 14:22-462
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

2个回答

0

需要去webpack里面配置,有些人用@ 表示从src目录开始
如果你用脚手架的话,在目录结构里有个
build 的文件夹下面的wepack.base.conf.js
里面有以下代码

var path = require('path') //引入path模块
var utils = require('./utils') // 引入工具文件

var projectRoot = path.resolve(__dirname, '../')
const vuxLoader = require('vux-loader')

var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

let webpackConfig = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')  //在这里,配置你的 波浪号 ~
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}


module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})

撰写答案