vue中less的使用 @import报错

[Mirror198829]

less的Usage

1.安装 less 和 less-loader

cnpm install less less-loader --save-dev

2.在配置文件webpack.config.js中添加代码

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

3.在vue页面中添加

<style scoped lang="less">
//只针对当前页面的样式
</style>
<style  lang="less">
//全局样式，可在此处建立主题颜色
</style>

[Mirror198829]

vue-cli中写less @import ‘…….less’报错

1.安装 less 和 less-loader

cnpm install less less-loader --save-dev

2. utils.js

如果此文件下已经有以下内容：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
}

则不用再写

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

3.@import less文件

在任意,vue文件中，

<style scoped lang="less">
@import '../less/index.less';
#footer{padding:20px;background-color: @theme-color;color:#fff;text-align: center;font-size: 12px;}
.foot-txt{margin-bottom:5px;-webkit-user-select:none;user-select:none;}
</style>

注意点：1. @import 语句后要加 封号 （；）
2.@import 的路径，必须写成相对路径