Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
Febbweiss
/
springboot-react-webpack
-ын хуулбар https://github.com/Febbweiss/springboot-react-webpack
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Feature: manage less files

fecaille 9 жил өмнө
parent
6251fcf075
commit
21e635f0c6
6 өөрчлөгдсөн 22 нэмэгдсэн , 28 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 2 0
      package.json
  2. 13 0
      src/main/resources/static/css/comments.less
  3. 1 0
      src/main/resources/static/js/app.render.jsx
  4. 1 1
      src/main/resources/templates/index-template.html
  5. 0 26
      src/main/resources/templates/index.html
  6. 5 1
      webpack.config.js

+ 2 - 0
package.json
Файл харах 

@@ -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 - 0
src/main/resources/static/css/comments.less
Файл харах 

@@ -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 - 0
src/main/resources/static/js/app.render.jsx
Файл харах 

@@ -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 || [];

+ 1 - 1
src/main/resources/templates/index-template.html
Файл харах 

@@ -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>

+ 0 - 26
src/main/resources/templates/index.html
Файл харах 

@@ -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>

+ 5 - 1
webpack.config.js
Файл харах 

@@ -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]"