关于vue @import路径问题

Question

<style lang="less" scoped rel="stylesheet/less">
  @import "../../common/less/mixin"; //正确
  @import "src/common/less/mixin.less"; //报错
</style>

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'src': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api')
    }
}

在vue里面@import路径问题,在webpack.base.config.js里面配置好别名,为什么在style标签里面直接用"src/" 会报错,需要在别的地方配置相关设置吗?在script标签里面引入没有问题,求解决方式!

Answer 1

eg:
@import '~@/assets/scss/helpers/_mixin';

使用 ~

Answer 2

<style>里的@import 是less 的语法了，所以相关配置要放在lessLoader 上。

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "less-loader", options: {
                    paths: [
                        path.resolve(__dirname, "node_modules")
                    ]
                }
            }]
        }]
    }
};

见：https://www.npmjs.com/package...