Webpack alias设置路径别名在@import css样式找不到路径?

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'UTIL': resolve('src/util'),
  'CSS': resolve('src/assets/css'),
  'TEMPLATE': resolve('src/views/hunter/templates'),
  'IMG': resolve('src/assets/img')
}

},
这是我webpack alias别名的设置

main.js 引入正常
import ‘CSS/vs.css’

.VUE文件中引入就会提示找不到路劲,也尝试过加~,同样的效果

@import “CSS/hunter/zhb.css”;

我这边测试是可以用的

vue.config.js

const path = require('path')

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

module.exports = {
  devServer: {
    hot: true,
    open: true
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('scss', resolve('src/assets/scss'))
      .set('css', resolve('src/assets/css'))
  }
}

Home.vue

<style scoped>
@import '~css/test.css';
</style>

<style lang="scss" scoped>
@import url(~scss/test.scss);
.img {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background-image: url(~assets/logo.png);
}
</style>

执行 npm install

1 Like

感谢 真的好用。。。。