如何让 CSS IntelliSense 在 Nuxt 项目上工作?
How to get CSS IntelliSense to work on a Nuxt project?
我正在做一个 Nuxt.js 项目,我还创建了一个 Docker 图像来处理所有事情;我还试图将 MDBVue 作为 CSS 库包含在内,阅读后我明白为了使用它我必须将它作为插件包含并在我的 nuxt.config.js
文件中引用它;
这是我的文件的样子:
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'skfe',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
css: [
{ src: "bootstrap-css-only/css/bootstrap.min.css" },
{ src: "mdbvue/build/css/mdb.css" }
],
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
现在 CSS class 可以使用了,但是我无法从 VSCode 获得任何自动完成功能,我必须输入完整的 class 名称;这是正常行为还是有办法让 IntelliSense 处理我的 Vue 文件?
这是正常行为:
https://github.com/Microsoft/vscode/issues/27635
试用插件:
IntelliSense for CSS class names in HTML
或
HTML CSS Support
来源:https://code.visualstudio.com/docs/languages/css
当然还有Veturvscode中vue开发的必备插件
我正在做一个 Nuxt.js 项目,我还创建了一个 Docker 图像来处理所有事情;我还试图将 MDBVue 作为 CSS 库包含在内,阅读后我明白为了使用它我必须将它作为插件包含并在我的 nuxt.config.js
文件中引用它;
这是我的文件的样子:
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'skfe',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
css: [
{ src: "bootstrap-css-only/css/bootstrap.min.css" },
{ src: "mdbvue/build/css/mdb.css" }
],
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
现在 CSS class 可以使用了,但是我无法从 VSCode 获得任何自动完成功能,我必须输入完整的 class 名称;这是正常行为还是有办法让 IntelliSense 处理我的 Vue 文件?
这是正常行为: https://github.com/Microsoft/vscode/issues/27635
试用插件:
IntelliSense for CSS class names in HTML
或
HTML CSS Support
来源:https://code.visualstudio.com/docs/languages/css
当然还有Veturvscode中vue开发的必备插件