add sass loader

client/components/App.jsx

 import React from 'react';
 import React from 'react';
-import '../main.css';
+import '../main.scss';
 
 
 export default class App extends React.Component {
 export default class App extends React.Component {
   render() {
   render() {

client/main.css → client/main.scss

 .text-center {
 .text-center {
   text-align: center;
   text-align: center;
+  h1 {
+    padding: 20px;
+  }
 }
 }

package.json

@@ -21,6 +21,8 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.1",
     "css-loader": "^0.28.1",
     "extract-text-webpack-plugin": "^2.1.0",
     "extract-text-webpack-plugin": "^2.1.0",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.5",
     "style-loader": "^0.17.0"
     "style-loader": "^0.17.0"
   }
   }
 }
 }

readme.md

@@ -11,6 +11,8 @@ yarn add html-webpack-plugin
 
 
 yarn add react react-dom
 yarn add react react-dom
 
 
+yarn add --dev sass-loader node-sass
+
 # 产品编译及压缩
 # 产品编译及压缩
 # https://webpack.js.org/guides/production-build/
 # https://webpack.js.org/guides/production-build/
 webpack -p
 webpack -p

webpack.config.js

@@ -10,6 +10,15 @@ const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
   inject: 'body'
   inject: 'body'
 })
 })
 
 
+const extractSass = ExtractTextPlugin.extract({
+  use: [{
+    loader: "css-loader"
+  }, {
+    loader: "sass-loader"
+  }],
+  fallback: "style-loader"
+})
+
 module.exports = {
 module.exports = {
   entry: './client/index.js',
   entry: './client/index.js',
   output: {
   output: {
@@ -19,7 +28,7 @@ module.exports = {
   module: {
   module: {
     loaders: [
     loaders: [
       { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ },
       { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ },
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }), exclude: /node_modules/ }
+      { test: /\.scss/, loader: extractSass, exclude: /node_modules/ }
     ]
     ]
   },
   },
   plugins: [
   plugins: [