mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 04:34:59 +08:00
Use the postcss-webpack-loader
Use postcss-webpack-loader instead of webpack-cli to process the scss. Doing so mostly means that we avoid the problem that webpack-dev-server fails to start if we haven't already built the CSS. (It also simplifies package.json somewhat, which is no bad thing)
This commit is contained in:
parent
c5032ba1bc
commit
c3fa6ff805
14
package.json
14
package.json
@ -29,21 +29,19 @@
|
||||
"reskindex": "reskindex -h src/header",
|
||||
"build:res": "node scripts/copy-res.js",
|
||||
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
|
||||
"build:css": "mkdirp build && postcss -c postcss.config.json",
|
||||
"build:compile": "babel --source-maps -d lib src",
|
||||
"build:bundle": "NODE_ENV=production webpack -p --progress",
|
||||
"build:bundle:dev": "webpack --optimize-occurence-order --progress",
|
||||
"build:electron": "npm run clean && npm run build && build -wml --ia32 --x64",
|
||||
"build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle",
|
||||
"build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev",
|
||||
"build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle",
|
||||
"build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev",
|
||||
"dist": "scripts/package.sh",
|
||||
"start:res": "node scripts/copy-res.js -w",
|
||||
"start:js": "webpack-dev-server -w --progress",
|
||||
"start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
|
||||
"start:css": "mkdirp build && postcss -c postcss.config.json -w",
|
||||
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"",
|
||||
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
|
||||
"clean": "rimraf build lib webapp electron/dist",
|
||||
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
|
||||
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",
|
||||
"clean": "rimraf lib webapp electron/dist",
|
||||
"prepublish": "npm run build:compile",
|
||||
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
|
||||
"test:multi": "karma start"
|
||||
@ -114,9 +112,9 @@
|
||||
"mocha": "^2.4.5",
|
||||
"parallelshell": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.7",
|
||||
"postcss-cli": "^2.6.0",
|
||||
"postcss-extend": "^1.0.5",
|
||||
"postcss-import": "^9.0.0",
|
||||
"postcss-loader": "^1.2.2",
|
||||
"postcss-mixins": "^5.4.1",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"postcss-scss": "^0.4.0",
|
||||
|
13
postcss.config.js
Normal file
13
postcss.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require("postcss-import")(),
|
||||
require("autoprefixer")(),
|
||||
require("postcss-simple-vars")(),
|
||||
require("postcss-extend")(),
|
||||
require("postcss-nested")(),
|
||||
require("postcss-mixins")(),
|
||||
require("postcss-strip-inline-comments")(),
|
||||
],
|
||||
"parser": "postcss-scss",
|
||||
"local-plugins": true,
|
||||
};
|
@ -1,15 +0,0 @@
|
||||
{
|
||||
"use": [
|
||||
"postcss-import",
|
||||
"autoprefixer",
|
||||
"postcss-simple-vars",
|
||||
"postcss-extend",
|
||||
"postcss-nested",
|
||||
"postcss-mixins",
|
||||
"postcss-strip-inline-comments"
|
||||
],
|
||||
"parser": "postcss-scss",
|
||||
"input": "src/skins/vector/css/themes/[^_]*.scss",
|
||||
"dir": "build",
|
||||
"local-plugins": true
|
||||
}
|
@ -17,8 +17,8 @@ module.exports = {
|
||||
"olm": "./src/vector/olm-loader.js",
|
||||
|
||||
// CSS themes
|
||||
"theme-light": "./build/light.scss",
|
||||
"theme-dark": "./build/dark.scss",
|
||||
"theme-light": "./src/skins/vector/css/themes/light.scss",
|
||||
"theme-dark": "./src/skins/vector/css/themes/dark.scss"
|
||||
},
|
||||
module: {
|
||||
preLoaders: [
|
||||
@ -27,9 +27,25 @@ module.exports = {
|
||||
loaders: [
|
||||
{ test: /\.json$/, loader: "json" },
|
||||
{ test: /\.js$/, loader: "babel", include: path.resolve('./src') },
|
||||
// css-raw-loader loads CSS but doesn't try to treat url()s as require()s
|
||||
// we're assuming that postcss has already preprocessed SCSS by this point
|
||||
{ test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
|
||||
{
|
||||
test: /\.scss$/,
|
||||
|
||||
// 1. postcss-loader turns the SCSS into normal CSS.
|
||||
// 2. css-raw-loader turns the CSS into a javascript module
|
||||
// whose default export is a string containing the CSS.
|
||||
// (css-raw-loader is similar to css-loader, but the latter
|
||||
// would also drag in the imgs and fonts that our CSS refers to
|
||||
// as webpack inputs.)
|
||||
// 3. ExtractTextPlugin turns that string into a separate asset.
|
||||
loader: ExtractTextPlugin.extract(
|
||||
"css-raw-loader!postcss-loader?config=postcss.config.js"
|
||||
),
|
||||
},
|
||||
{
|
||||
// this works similarly to the scss case, without postcss.
|
||||
test: /\.css$/,
|
||||
loader: ExtractTextPlugin.extract("css-raw-loader"),
|
||||
},
|
||||
],
|
||||
noParse: [
|
||||
// don't parse the languages within highlight.js. They cause stack
|
||||
|
Loading…
Reference in New Issue
Block a user