在main.js中引入less文件无效

Question

index.js?bed3:167 ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: 

  width: 100%;
  .border-1px( rgba(7, 17, 27, 0.1));
^
.border-1px is undefined
      in C:\Users\Administrator\sell-app\src\App.vue (line 34, column 2)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我是在main.js中直接引入的  没有在webpack.base.conf.js中配置rules，配置了也报错~  在app组件中的style中单独引入就能生效

import './common/css/common.less'

Answer 1

ustbhuangyi 2018-07-29 12:43:56

.border-1px 是什么，写错了吧，前面没有 . 吧

• 提问者 withyou_ #1

  .border-1px(@color){
      position: relative;
      &::after{
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          border-top: 1px solid @color;
          content: "";
      }
  }
  ‘’.‘’是less中带参数混合的写法，没有会报错，上面这个less文件，在app.vue中的样式中引入可以调用成功，但是在main.js中全局引入就要报错