vue-cli脚手架: vue create client创建的项目中使用postcss不生效

JoeBlackzqq 2019-08-06 05:54:28
通过vue create client创建了一个前端项目,然后新建了一个Header.vue,里面的postcss写法编译虽然能过,但是不起作用,主要就是嵌套了!

求解答:

基本环境: mac os x : 10.12


[zcm@client 5]$node -v
v12.6.0
[zcm@client 6]$npm -v
6.9.0
[zcm@client 7]$vue -V
3.9.2


基本框架:


package.json:

{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.10.0",
"@vue/cli-plugin-eslint": "^3.10.0",
"@vue/cli-service": "^3.10.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"postcss-preset-env": "^6.7.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-preset-env": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}



babel.config.js:

module.exports = {
presets: [
'@vue/app'
]
}




./components/Header.vue:

<template>
<div>
<div class="top">
<div>logo</div>
<div>sign in / sign out</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
name: 'joeblack2'
}
},

props: [

],
}
</script>

<style lang="postcss" scoped>
.top {
display: flex;
align-content: center;

& :hover {
color: #666;
}
div {
/* border: 1px solid red; */
color: green;
}
}
</style>



谢谢大家!

这个默认创建的工程里没有webpack.config.js,是不是因为采用了脚手架里默认的配置了!网上的文章看了一大堆,各有各的写法,而且是写在不同的配置文件里的,前提条件也没有讲的太明确 ,不知从哪下手!

...全文
389 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
JoeBlackzqq 2019-08-08
  • 打赏
  • 举报
回复
已解决,
JoeBlackzqq 2019-08-06
  • 打赏
  • 举报
回复
浏览器上的解析结果是这样的:

JoeBlackzqq 2019-08-06
  • 打赏
  • 举报
回复
另外,在我的理解里,各种插件的写法,应该都可以配置在package.json中的,是不是这样?我是从默认生成的文件内容上推断出来的!

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧