https://github.com/cxspxr/vue-cli-plugin-sugarss

:strawberry: SugarSS support for vue-cli projects
https://github.com/cxspxr/vue-cli-plugin-sugarss

postcss sass stylus sugarss vue vue-cli vue-cli-plugin webpack

Last synced: 28 days ago
JSON representation

:strawberry: SugarSS support for vue-cli projects

• Host: GitHub
• URL: https://github.com/cxspxr/vue-cli-plugin-sugarss
• Owner: cxspxr
• Created: 2018-09-30T00:11:01.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-12T20:39:02.000Z (over 4 years ago)
• Last Synced: 2024-04-25T20:02:54.374Z (7 months ago)
• Topics: postcss, sass, stylus, sugarss, vue, vue-cli, vue-cli-plugin, webpack
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-cli-plugin-sugarss
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-cli-plugin-sugarss

[SugarSS](https://github.com/postcss/sugarss) support for the projects created with [@vue/cli](https://github.com/vuejs/vue-cli). Lints [SASS](https://github.com/sass/sass) and [Stylus](https://github.com/stylus/stylus).

## Installation

According to [this](https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project) you are able to install community plugins as follows:

```shell

vue add sugarss

```

## Usage

You can just go with `file.sss` and/or `style[lang=sss]` as it is shown below.

```html

body

  color: red

```

## PostCSS plugins

This plugin use it's custom webpack rule named `sss`. So in order to add some options (including plugins) to `postcss-loader` (or `vue-style-loader`, or `css-loader`) you need chain existing webpack rule in `vue.config.js` like this:

```bash

$ npm i -D 

$ npm i -D 

```

```javascript

// vue.config.js

module.exports = {

  chainWebpack: config => {

    config.module.rule('sss')

      .use('postcss-loader')

        .loader('postcss-loader')

        .tap(opts => {

          opts.plugins.push(

            // in some order you want

            require(''),

            require('')

          );

          // You can change or set any property

          // opts.parser = 'sugarss';

          return opts;

        });

  }

}

```

### `postcss-nested` & `postcss-nested-props`

You should `require('post-css-nested-props')` before `require('postcss-nested')` when pushing them to plugins.