首页 > vue中引用less,sass

奔驰配置单在线生成,vue中引用less,sass

互联网 2021-02-28 08:52:00

一、组件内使用

1、安装依赖 npm install less less-loader --save-dev; 最新的依赖可能会有Bug,所以尽量安装低一点的版本; 卸载原来的 npm uninstall less-loader; 稳定版:npm install less-loader@4.1.0 --save(推荐); 2、找到build目录下的webpack.base.conf.js打开 在module--rules中加入规则: 以less为例,网上能找到的普遍做法 {      test: /\.less$/,      loader: "style-loader!css-loader!less-loader",  }  有的时候引入这种规则仍然报错,  修改规则   {      test: /\.less$/,      loaders: ["style","css","less"]  }  3、在组件的style标签内加入lang="less"即可。

二、全局文件

1、安装依赖npm install sass-resources-loader --save-dev

npm可能比较卡,可以用cnpm安装;

2、在build的utils.js中的cssLoaders方法中加入代码块

function lessResourceLoader() {     const loaders = [         cssLoader,         'less-loader',         {             loader: 'sass-resources-loader',             options: {                 resources: [                     path.resolve(__dirname, '../src/static/css/app.less'),                 ]             }         }     ];     if (options.extract) {         return ExtractTextPlugin.extract({             use: loaders,             fallback: 'vue-style-loader'         })     } else {         return ['vue-style-loader'].concat(loaders)     }   } path.resolve内的路径指向全局文件放的位置

3、搜索generateLoaders('less'),替换为lessResourceLoader();

重启下项目即可。

免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。

相关阅读