Skip to content
This repository was archived by the owner on Feb 1, 2020. It is now read-only.

Commit a7d83fb

Browse files
FflorielFfloriel
committed
example postcss and scss
- add example of use with postcss and scss
1 parent d896adf commit a7d83fb

File tree

7 files changed

+188
-0
lines changed

7 files changed

+188
-0
lines changed

‎examples/postcss-and-scss/dist/bundle.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
/******/
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
/******/
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId]) {
10+
/******/ return installedModules[moduleId].exports;
11+
/******/ }
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ i: moduleId,
15+
/******/ l: false,
16+
/******/ exports: {}
17+
/******/ };
18+
/******/
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
/******/
22+
/******/ // Flag the module as loaded
23+
/******/ module.l = true;
24+
/******/
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
/******/
29+
/******/
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
/******/
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
/******/
36+
/******/ // define getter function for harmony exports
37+
/******/ __webpack_require__.d = function(exports, name, getter) {
38+
/******/ if(!__webpack_require__.o(exports, name)) {
39+
/******/ Object.defineProperty(exports, name, {
40+
/******/ configurable: false,
41+
/******/ enumerable: true,
42+
/******/ get: getter
43+
/******/ });
44+
/******/ }
45+
/******/ };
46+
/******/
47+
/******/ // getDefaultExport function for compatibility with non-harmony modules
48+
/******/ __webpack_require__.n = function(module) {
49+
/******/ var getter = module && module.__esModule ?
50+
/******/ function getDefault() { return module['default']; } :
51+
/******/ function getModuleExports() { return module; };
52+
/******/ __webpack_require__.d(getter, 'a', getter);
53+
/******/ return getter;
54+
/******/ };
55+
/******/
56+
/******/ // Object.prototype.hasOwnProperty.call
57+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58+
/******/
59+
/******/ // __webpack_public_path__
60+
/******/ __webpack_require__.p = "";
61+
/******/
62+
/******/ // Load entry module and return exports
63+
/******/ return __webpack_require__(__webpack_require__.s = 0);
64+
/******/ })
65+
/************************************************************************/
66+
/******/ ([
67+
/* 0 */
68+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
69+
70+
"use strict";
71+
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
72+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__style_scss__ = __webpack_require__(1);
73+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__style_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__style_scss__);
74+
75+
76+
function component() {
77+
var element = document.createElement('div')
78+
79+
element.classList.add('hello')
80+
return element
81+
}
82+
83+
document.body.appendChild(component())
84+
85+
86+
/***/ }),
87+
/* 1 */
88+
/***/ (function(module, exports) {
89+
90+
// removed by extract-text-webpack-plugin
91+
92+
/***/ })
93+
/******/ ]);

‎examples/postcss-and-scss/dist/main.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.hello {
2+
color: red; }
3+
4+
.whitelisted {
5+
color: green; }

‎examples/postcss-and-scss/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "simple-example-purgecss-webpack",
3+
"version": "1.0.0",
4+
"description": "Example of purgecss webpack plugin with postcss loader and scss",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"build": "npx webpack"
9+
},
10+
"author": "Ffloriel",
11+
"license": "MIT",
12+
"devDependencies": {
13+
"css-loader": "^0.28.7",
14+
"extract-text-webpack-plugin": "^3.0.2",
15+
"node-sass": "^4.7.2",
16+
"postcss-cssnext": "^3.0.2",
17+
"postcss-import": "^11.0.0",
18+
"postcss-loader": "^2.0.9",
19+
"postcss-scss": "^1.0.2",
20+
"purgecss-webpack-plugin": "^0.16.0",
21+
"sass-loader": "^6.0.6",
22+
"style-loader": "^0.19.1",
23+
"sugarss": "^1.0.1",
24+
"webpack": "^3.10.0"
25+
}
26+
}

‎examples/postcss-and-scss/postcss.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
parser: 'sugarss',
3+
// syntax: 'postcss-scss',
4+
plugins: {
5+
'postcss-import': {},
6+
'postcss-cssnext': {},
7+
cssnano: {}
8+
}
9+
}

‎examples/postcss-and-scss/src/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import './style.scss'
2+
3+
function component() {
4+
var element = document.createElement('div')
5+
6+
element.classList.add('hello')
7+
return element
8+
}
9+
10+
document.body.appendChild(component())

‎examples/postcss-and-scss/src/style.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.hello
2+
color: red
3+
4+
.world
5+
background: white
6+
7+
.unused
8+
color: blue
9+
10+
.whitelisted
11+
color: green

‎examples/postcss-and-scss/webpack.config.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const path = require('path')
2+
const glob = require('glob')
3+
const ExtractTextPlugin = require('extract-text-webpack-plugin')
4+
const PurgecssPlugin = require('purgecss-webpack-plugin')
5+
6+
const PATHS = {
7+
src: path.join(__dirname, 'src')
8+
}
9+
10+
module.exports = {
11+
entry: './src/index.js',
12+
output: {
13+
filename: 'bundle.js',
14+
path: path.join(__dirname, 'dist')
15+
},
16+
module: {
17+
rules: [
18+
{
19+
test: /\.scss$/,
20+
use: ExtractTextPlugin.extract({
21+
fallback: 'style-loader',
22+
use: ['css-loader?sourceMap', 'sass-loader', 'postcss-loader']
23+
})
24+
}
25+
]
26+
},
27+
plugins: [
28+
new ExtractTextPlugin('[name].css?[hash]'),
29+
new PurgecssPlugin({
30+
paths: glob.sync(`${PATHS.src}/*`),
31+
whitelist: ['whitelisted']
32+
})
33+
]
34+
}

0 commit comments

Comments
 (0)