av/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add css extraction

Browse Source
This commit is contained in:
Anton Vakhrushev 2018-06-24 12:26:41 +03:00
parent 9125f92432
commit 3e81397fe1
7 changed files with 55 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -6283,6 +6283,16 @@
"integrity": "sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4=",
"dev": true
},
"mini-css-extract-plugin": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
"integrity": "sha512-2Zik6PhUZ/MbiboG6SDS9UTPL4XXy4qnyGjSdCIWRrr8xb6PwLtHE+AYOjkXJWdF0OG8vo/yrJ8CgS5WbMpzIg==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"webpack-sources": "^1.1.0"
}
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"css-loader": "^0.28.11",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"predictor": "git+https://github.com/anwinged/predictor.git",

11
source/_layouts/default.html.twig
View File

@ -2,7 +2,8 @@
<html>
<head>
{% include 'head.twig' %}
</head>
<link rel="stylesheet" href="/static/layout_default.css?v={{ date().timestamp }}"></head>
{% block css %}{% endblock %}
<body>
<main class="content">
@ -11,11 +12,7 @@
{% include 'counters.twig' %}
<script src="/static/layout_default.js?v={{ date().timestamp }}"></script>
{% block js %}
{# extra js scripts here #}
{% endblock %}
<script async src="/static/layout_default.js?v={{ date().timestamp }}"></script>
{% block js %}{% endblock %}
</body>
</html>

10
source/_layouts/internal.html.twig
View File

@ -2,6 +2,8 @@
<html>
<head>
{% include 'head.twig' %}
<link rel="stylesheet" href="/static/layout_internal.css?v={{ date().timestamp }}">
{% block css %}{% endblock %}
</head>
<body>
@ -17,11 +19,7 @@
{% include 'counters.twig' %}
<script src="/static/layout_internal.js?v={{ date().timestamp }}"></script>
{% block js %}
{# extra js scripts here #}
{% endblock %}
<script async src="/static/layout_internal.js?v={{ date().timestamp }}"></script>
{% block js %}{% endblock %}
</body>
</html>

8
source/about/me.html.twig
View File

@ -5,11 +5,13 @@ description: Несколько фактов об авторе
---
{% block js %}
<script src="/static/about_me.js?v={{ date().timestamp }}"></script>
<script async src="/static/about_me.js?v={{ date().timestamp }}"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="/static/about_me.css?v={{ date().timestamp }}">
{% endblock %}
{% block content %}
<div id="app"></div>
{% endblock %}

6
source/projects/predictor/index.html.twig
View File

@ -5,7 +5,11 @@ description: Демо-версия электронной гадалки Шен
---
{% block js %}
<script src="/static/predictor.js?v={{ date().timestamp }}"></script>
<script async src="/static/predictor.js?v={{ date().timestamp }}"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="/static/predictor.css?v={{ date().timestamp }}">
{% endblock %}
{% block content %}

31
webpack.config.js
View File

@ -1,6 +1,7 @@
const path = require('path');
const autoprefixer = require('autoprefixer');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env = {}) => {
const is_prod = !!env.production;
@ -28,6 +29,8 @@ module.exports = (env = {}) => {
const SCSS_LOADER = { loader: 'sass-loader' };
const MINI_CSS_LOADER = MiniCssExtractPlugin.loader;
const BABEL_LOADER = {
loader: 'babel-loader',
options: {
@ -39,9 +42,13 @@ module.exports = (env = {}) => {
loader: 'vue-loader',
options: {
loaders: {
css: ['vue-style-loader', CSS_LOADER, POSTCSS_LOADER],
css: [
MINI_CSS_LOADER, //'vue-style-loader',
CSS_LOADER,
POSTCSS_LOADER,
],
scss: [
'vue-style-loader',
MINI_CSS_LOADER, //'vue-style-loader',
CSS_LOADER,
POSTCSS_LOADER,
'sass-loader',
@ -71,12 +78,18 @@ module.exports = (env = {}) => {
},
{
test: /\.css$/,
use: [STYLE_LOADER, CSS_LOADER, POSTCSS_LOADER],
use: [
MINI_CSS_LOADER,
// STYLE_LOADER,
CSS_LOADER,
POSTCSS_LOADER,
],
},
{
test: /\.scss$/,
use: [
STYLE_LOADER,
MINI_CSS_LOADER,
// STYLE_LOADER,
CSS_LOADER,
POSTCSS_LOADER,
SCSS_LOADER,
@ -88,6 +101,14 @@ module.exports = (env = {}) => {
},
],
},
plugins: [new VueLoaderPlugin()],
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
// chunkFilename: "[id].css"
}),
],
};
};