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

Question

原帖地址:https://bbs.csdn.net/topics/3...

问题描述

通过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，是不是因为采用了脚手架里默认的配置了！网上的文章看了一大堆，各有各的写法，而且是写在不同的配置文件里的，前提条件也没有讲的太明确 ，不知从哪下手！

Answer 1

PostCSS 是一个用js来转换css代码的工具，并不是预编译器。
所以 Header.vue 中 <style lang="postcss" scoped></style> 的写法是不对的。

看这个语法应该是 SCSS 的语法。
应该安装 sass-loader 和 node-sass。

npm i sass-loader node-sass -D

Header.vue 中 <style> 改一下。

<style lang="scss" scoped>
...
</style>