vue css 相对路径导入踩坑记

最新推荐文章于 2024-09-27 15:46:53 发布

学而时记之

最新推荐文章于 2024-09-27 15:46:53 发布

阅读量5.1k

点赞数 3

分类专栏： Vue 文章标签： vue css 相对路径

本文链接：https://blog.csdn.net/aa8227869/article/details/100037648

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前提：
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev
npm install vue-style-loader — save

利用官方的组件解决css 以及其他静态资源的路径问题

先附上成功的配置
1.build/utils.js
关键的地方在：在这里插入图片描述
2.build/webpack.base.conf.js
$module.exports = {context: path.resolve(__dirname, '../'),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','.css'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'assets':resolve('src/assets'),}},$
遇到的坑：
1.错误写法：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190823143844674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhODIyNzg2OQ==,size_16,color_FFFFFF,t_70 第一行用的是绝对路径，第二行用的是相对路径。
这样写造成的错误：
Module build failed: Error: Failed to find ‘~@/assets/css/login.css’
经过多次尝试，以及搜索了很久。有说法是style内部不支持~@这种方式的路径指向。
2.正确的写法：
在这里插入图片描述

3.如果想在“style”里面用上~@表示的相对路径，接下来介绍我已经实现的方案：
首先选用Less(http://lesscss.cn/) +postcss (https://www.postcss.com.cn/)。
接下来是具体做法，直接上当前配置。
先安装以下指令：
npm install less less-loader extract-text-webpack-plugin --sava-dev
然后打开工程的/build/ 新建文件 postcss.config.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: 'last 5 version'
    }
  },
  'postcss-import': {
   resolve(id) {
     if (id.charAt(0) == '~') {
       return id.substr(1)
     } else {
       return id
     }
   }
  }
}

修改webpack.base.conf.js 的配置，增加：

// 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
            loader: 'style-loader'
          }, {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },

修改完之后，重启webpack服务。这里我是用Mac 的终端，在webpack服务窗口使用command + C 就是结束当前运行的服务，再使用npm run dev 重启就可以。

在.vue 文件内的最后使用

<style lang="less" scoped>
  @import "~assets/css/rank.less";
  @import "~assets/css/common.less";
  .contentBox {
    padding: 20px;
  }
</style>

这里要注意加上 ~ , 不然依然无法识别路径。这里暂时还没找到原因，看别人的是可以直接使用。网上教程很多，但是很难找到比较完整的东西，对于自学的娃是伤不起，也没有能一直免费为你解答问题的人。还是自己慢慢摸索，相信大家都能有所成长。