Febbweiss/springboot-react-webpack
1
0
Fork 0
mirror of https://github.com/Febbweiss/springboot-react-webpack.git synced 2026-03-04 22:25:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feature: manage less files

Browse Source
This commit is contained in:
fecaille
2016-03-31 16:42:18 +02:00
parent 6251fcf075
commit 21e635f0c6
6 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -19,6 +19,8 @@
"file-loader": "^0.8.5", "file-loader": "^0.8.5",
"html-loader": "^0.4.3", "html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0", "html-webpack-plugin": "^2.15.0",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"postcss-loader": "^0.8.2", "postcss-loader": "^0.8.2",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",

13
src/main/resources/static/css/comments.less Normal file
View File

@@ -0,0 +1,13 @@
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
}

1
src/main/resources/static/js/app.render.jsx
View File

@@ -10,6 +10,7 @@ import $ from 'jquery';
require('bootstrap/dist/css/bootstrap.css'); require('bootstrap/dist/css/bootstrap.css');
require('../css/comments.css'); require('../css/comments.css');
require('../css/comments.less');
global.renderClient = function (comments) { global.renderClient = function (comments) {
var data = comments || []; var data = comments || [];

2
src/main/resources/templates/index-template.html
View File

@@ -8,7 +8,7 @@
<div th:replace="fragments/header"></div> <div th:replace="fragments/header"></div>
<div class="container"> <div class="container">
<div id="content" th:utext="${markup}"></div> <div id="content" class="box" th:utext="${markup}"></div>
</div> </div>
<div th:replace="fragments/footer"></div> <div th:replace="fragments/footer"></div>

26
src/main/resources/templates/index.html
View File

@@ -1,26 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8" />
<title>Comments channel</title>
<link rel="stylesheet" href="/css/vendors.css" />
<link rel="stylesheet" href="/css/app.css" />
</head>
<body>
<div th:replace="fragments/header"></div>
<div class="container">
<div id="content" th:utext="${markup}"></div>
</div>
<div th:replace="fragments/footer"></div>
<script src="/js/vendors.bundle.js"></script>
<script src="/js/app.bundle.js"></script>
<script th:inline="javascript">
var initialData = JSON.parse(/*[[${data}]]*/ '[]');
renderClient(initialData);
</script>
</body>
</html>

6
webpack.config.js
View File

@@ -13,7 +13,7 @@ var config = {
vendors: [source_dir + '/js/vendors'] vendors: [source_dir + '/js/vendors']
}, },
resolve: { resolve: {
extensions: ['', '.js', '.jsx', '.css'] extensions: ['', '.js', '.jsx', '.css', '.less']
}, },
devtool: 'source-map', devtool: 'source-map',
cache: true, cache: true,
@@ -48,6 +48,10 @@ var config = {
test: /\.css$/, test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader") loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
}, },
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?!postcss-loader!less-loader')
},
{ {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?name=font/[name].[ext]" loader: "file?name=font/[name].[ext]"