时间戳

首页 > 解决方案 > 将 PostCSS 支持添加到 Vue cli 3 的正确方法

vue.js - 将 PostCSS 支持添加到 Vue cli 3 的正确方法

问题描述

我们如何将 PostCSS 支持添加到 Vue cli 3（我使用的是 beta 7）？有插件吗？它不支持开箱即用。

当我尝试像这样导入时

import './index.pcss'

使用默认 cli 生成的项目

./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
|   font-family: "sofachrome", serif;
| }
 @ ./src/main.js 5:0-22

我的 postcssrc.js：

module.exports =
  {
    'plugins': {
      'autoprefixer': {},
      'postcss-smart-import': {},
      'postcss-custom-properties': {},
      'postcss-nested': {}
    }
  }

标签： vue.jspostcssvue-cli

解决方案

只需使用.css扩展名，而不是.pcss. 如果必须使用.pcss，则必须在 webpack 中进行配置。至于如何正确利用该规则来做到这一点，我需要进行一些研究。不过，我认为仅仅使用.css就是一个明显的胜利。

推荐阅读