使用scss

Author: FAKER-A

build/webpack.base.conf.js

@@ -51,6 +51,10 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
+      {
+        test: /\.scss$/,
+        loader: 'style-loader!css-loader!scss-loader',
+      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',

package.json

@@ -9,9 +9,7 @@
     "start": "npm run dev",
     "build": "node build/build.js"
   },
-  "dependencies": {
-    "vue": "^2.5.2"
-  },
+  "dependencies": {},
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
@@ -24,26 +22,27 @@
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
-    "element-ui": "^2.1.0",
+    "css-loader": "^0.28.9",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
+    "vue-style-loader": "^3.1.2",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",

src/components/sel-table/index.vue

@@ -0,0 +1,28 @@
+<template>  
+    <div class="sel-table">
+        <div class="sel-table__element"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .sel-table{
+        width:100px;
+        height:100px;
+        border:1px solid #f66;
+        &__element{
+            width:50px;
+            height:50px;
+            background:#f66;
+        }
+    }
+</style>

src/components/sel-table/partials/td.vue

@@ -0,0 +1,14 @@
+<template>
+    
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/pages/index/index.vue

@@ -1,14 +1,20 @@
 <template>
     <div class="app">
         <Header></Header>
+        <div style="margin-top:100px">
+            <sel-table></sel-table>
+        </div>
+        
     </div>
 </template>
 
 <script>
 import Header from '../../components/header'
+import selTable from '../../components/sel-table/index'
 export default {
     components:{
-        Header
+        Header,
+        selTable
     },
     data() {
         return{