vue中使用自定义的公共less文件
项目环境:vue 2.9.6 + webpack + iview
为了更加方便的管理和维护css,决定在项目中使用Less,并创建一个公共的less文件,但是在引用时出现了一系列的问题,其中尝试了下面两种引入方式:
1、在入口js文件中import
2、在入口的vue文件的style中@import
,style不加scope;
在这过程中也出现了很多问题,不过也都一一解决了,但是遗憾的是,这两种方式引入之后并没有起到任何效果,于是在网上有查找并尝试了另一种方式,最终完美解决,如下:
如果操作过程中,出现报错情况,请移步 https://blog.csdn.net/qq_40652539/article/details/93398864 ,希望可以解决你的报错问题。
1、安装依赖包
通过如下命令,安装相关依赖包:npm install sass-resources-loader --save-dev
2、修改相关配置文件
找到目录结构中的build/utils.js
文件,在exports.cssLoaders
模块中添加函数:
//////////////// 新添加的函数/////////////////////////////
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'less-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/custom_public_var.less'), // 这里的路径为自定义的Less文件的相对路径
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
//////////////////////////////////////////////////////////////////////////
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: lessResourceLoader(), //这里的lessResourceLoader就是上面的方法
// less: generateLoaders('less'), // 将原来的注释掉
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
上面代码中,lessResourceLoader()
为新添加的函数,../src/assets/custom_public_var.less
为自定义的Less文件的相对路径,然后将return{...}
中的less: generateLoaders('less')
替换为less: lessResourceLoader()
;
3、重新编译运行项目
修改完成后执行:npm run dev
重新运行项目即可。
sass 也可尝试这中方法,把less-loader改为sass-loader即可;本人没有尝试
上一篇: 上传下载
下一篇: jQuery源码分析init
推荐阅读
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
使用Vue 自定义文件选择器组件的实例代码
-
vue-cli 2.*中导入公共less文件的方法步骤
-
解决Vue2.0中使用less给元素添加背景图片出现的问题
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
-
vue中使用自定义的公共less文件
-
Springboot如何获取配置文件application.yml中自定义的变量并使用
-
解决vue中less的使用问题
-
Vue2.0中使用less给元素添加背景图片出现的问题
-
vue3.0中自定义指令的使用