scss

d140e4ff · shangbj · 5fcbc5e9 · d140e4ff · d140e4ff · d140e4ff
Commit d140e4ff authored Jun 10, 2018 by shangbj
7 changed files
--- a/3-4使用SCSS语言/index.html
+++ b/3-4使用SCSS语言/index.html
+<html>
+    <head>
+        <meta charset="UTF-8">
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./dist/bundle.js"></script>
+    </body>
+</html>
\ No newline at end of file
--- a/3-4使用SCSS语言/main.js
+++ b/3-4使用SCSS语言/main.js
+require('./main.scss')
+const show =  require('./show')
+
+show('scss')
\ No newline at end of file
--- a/3-4使用SCSS语言/main.scss
+++ b/3-4使用SCSS语言/main.scss
+$blue:#1876e7;
+
+#app{
+    color:$blue
+}
+    
--- a/3-4使用SCSS语言/package-lock.json
+++ b/3-4使用SCSS语言/package-lock.json
--- a/3-4使用SCSS语言/package.json
+++ b/3-4使用SCSS语言/package.json
+{
+  "name": "3-4",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^0.28.11",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.3"
+  }
+}
--- a/3-4使用SCSS语言/show.js
+++ b/3-4使用SCSS语言/show.js
+function show(txt){
+    document.getElementById("app").innerText = 'Hello,' +txt;
+}
+
+module.exports = show;
\ No newline at end of file
--- a/3-4使用SCSS语言/webpack.config.js
+++ b/3-4使用SCSS语言/webpack.config.js
+const path = require('path');
+
+module.exports = {
+    entry:'./main.js',
+    output:{
+        filename:'bundle.js',
+        path:path.resolve(__dirname,'./dist')
+    },
+    module:{
+        rules:[
+            {
+                test: /\.scss$/,
+                use: ['style-loader','css-loader','sass-loader']
+            }
+        ]
+    }
+}
\ No newline at end of file