Commit f14dfbbf authored by John Kirkwood's avatar John Kirkwood

Webpack MDC js and CSS

parent b7d1658c
Pipeline #2121 failed with stage
in 12 seconds
{% load static %} {% load static %}
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" /> <link rel="stylesheet" type="text/css" href="{% static "output.css" %}" />
<script type="text/javascript" src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head> </head>
<body> <body>
<form id="form-django" method="POST"> <form id="form-django" method="POST">
...@@ -74,6 +73,5 @@ ...@@ -74,6 +73,5 @@
</div> </div>
</form> </form>
<script type="text/javascript" src="{% static "output.js" %}"></script> <script type="text/javascript" src="{% static "output.js" %}"></script>
<script>window.mdc.autoInit();</script>
</body> </body>
</html> </html>
window.mdc = require('material-components-web');
window.mdc.autoInit();
@import "material-components-web/material-components-web";
...@@ -9,8 +9,12 @@ ...@@ -9,8 +9,12 @@
}, },
"dependencies": { "dependencies": {
"autoprefixer": "^9.1.5", "autoprefixer": "^9.1.5",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"material-components-web": "^0.39.1", "material-components-web": "^0.39.1",
"node-sass": "^4.11.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.16.1", "webpack": "^4.16.1",
"webpack-cli": "^3.1.0" "webpack-cli": "^3.1.0"
}, },
......
const autoprefixer = require('autoprefixer') const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path') var path = require('path');
const extractSass = new ExtractTextPlugin({ const extractSass = new ExtractTextPlugin({
filename: 'main.css', filename: 'output.css',
}) });
module.exports = { module.exports = {
mode: 'development', mode: 'development',
devtool: 'source-map', devtool: 'source-map',
entry: './main.js', entry: ['./main.js', './main.scss'],
output: { output: {
filename: 'output.js', filename: 'output.js',
path: path.resolve(__dirname, 'blog/static') path: path.resolve(__dirname, 'blog/static')
...@@ -20,8 +20,12 @@ module.exports = { ...@@ -20,8 +20,12 @@ module.exports = {
// }, // },
module: { module: {
rules: [ rules: [
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, {
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader' },
{ {
test: /\.py$/, test: /\.py$/,
loader: 'py-loader', loader: 'py-loader',
...@@ -43,14 +47,16 @@ module.exports = { ...@@ -43,14 +47,16 @@ module.exports = {
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {
sourceMap: true, sourceMap: true,
plugins: () => [autoprefixer()] plugins: () => [autoprefixer({grid: false})]
} }
}, },
{ {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap: true, sourceMap: true,
includePaths: ['./node_modules'] includePaths: [
path.resolve(__dirname, 'node_modules')
]
} }
} }
] ]
...@@ -61,4 +67,4 @@ module.exports = { ...@@ -61,4 +67,4 @@ module.exports = {
plugins: [ plugins: [
extractSass extractSass
] ]
} };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment