App.vue引入全局less无法使用问题

Question

less-loder已经安装过了

// theme.less

@wid:1000px;

// App.vue

<style lang="less">
@import './style/theme.less';
</style>

// search.vue

<style lang='less' scoped>
.dataSearch {
  width: @wid;
}
</style>

Answer 1

需要安装sass-resources-loader。
找到build文件夹下面的utils.js 找到
less: generateLoaders('less') 修改成
less: generateLoaders('less').concat({

    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/css/1.less')
    }
}), 1.less就是你全局文件

Answer 2

组件在使用less变量时，需要单独在组件中引入文件 @import '@/assets/less/variable.less'

Answer 3

可能是编译的时候 是一块一块的编译的 所以出现这个变量不识别

应该 按照模块写吧

Answer 4

你少了这一句：

﹂src
﹂webpack.base.conf.js

        {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader"
         }