新冠疫情自我检测系统网页设计开发文档
Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性、有效性、及时性和完整性,更多内容请查看国家卫健委网站!
Explore the docs »
View Demo · Report Bug · Request Feature
Vue项目全局Less配置
We use Less
as our pre-processor for the project. You need to manually install the corresponding webpack loaders with correct versions:
# Less
npm i [email protected] [email protected] -D --legacy-peer-deps
Then add the loader to your webpack
config build/webpack.base.conf.js
. For example:
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
For every single Vue component, we create a corresponding Less file in src/assets/styles
.
开发环境
node | 14.16.1 |
---|---|
npm | 8.18.0 |
vue-cli | 2.9.6 |
vue | 2.5.2 |
解决方案
You can automatically import files (for colors, variables, mixins…) by following the next steps.
Simply using the style-resources-loader or vue-cli-plugin-style-resources-loader to set global less variables is for Vue CLI 3, which creates a new project by running
vue create
. We use Vue CLI 2, runningvue init
to create a project. So make sure that you won’t use these packages under Vue CLI 2 environment becausevue.config.js
is unavailable.
First install the package:
# install package
npm i sass-resources-loader -D --legacy-peer-deps
Then add function lessResourceLoader
to function cssLoaders
in file /build/utils.js
:
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/styles/common.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
Finally, modify function cssLoaders
return item less
:
less: lessResourceLoader()
Now src/assets/styles/common.js
becomes your global style file.
转载请注明出处:©️ Sylvan Ding 2022