StencilJS和Postcss插件安装

时间:2019-05-24 19:39:40

标签: postcss stenciljs postcss-loader postcss-import

首次设置StencilJS。我已按照说明进行操作,并尝试配置配置文件,但未使插件正常工作。迷失的作品别人没有。如下安装的所有软件包和我正在努力调用插件的配置文件。

这是stenciljs的正确方法吗?

谢谢您的帮助(新手,一直在努力学习github文档,需要高级帮助,谢谢!)

安装方法:

StencilJS Install:

npm init stencil

install:
postcss :  npm install @stencil/postcss --save-dev
autoprefixer: npm install autoprefixer @types/autoprefixer --save-dev

postcss plugins:
precss: npm install precss --save-dev
font-magician: npm install postcss-font-magician --save-dev
postcss-preset-env:  npm install postcss-preset-env --save-dev
lost: npm install --save-dev lost

Stencil.config.js

import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import precss from 'precss';
import lost from 'lost';
import fontMagician from 'postcss-font-magician';

export const config: Config = {
  namespace: 'stentest',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ],
  plugins: [
    postcss ({  
        plugins: [

    autoprefixer({
        browsers:['last 6 versions'];
        cascade:false
    });
        lost();
        precss();
        postcssPresetEnv({
            browsers:['Last 2 versions', 'ie >=9',
            compress:true
        });
  ]
    })
  ]
};

export const module: modules = {
  plugins: {
    fontMagician: ({
         variants: {
             'Roboto Condensed': {
                 '300': [],
                 '400': [],
                 '700': []
             }
         },
         foundries: ['google']
    })
  }
}

0 个答案:

没有答案