SASS未在React / Webpack项目中呈现

Question

I added SASS to my project because I like using SASS for my CSS. In my app folder I made CSS folder and a SCSS folder. I run sass --watch scss:css to map over my scss changes to the css folder. This is working great, I think. In my webpack I added a loader to handle SCSS and SASS and added the files need to my package.json. In order to start using the SASS styles do I need to include them in my index.html file or do I need to import them into each component I want to use them with the new es6 import x from 'xpath' thing?

Here are my package.json and webpack.config.js files

{
  "name": "newaccount",
  "version": "1.0.0",
  "description": "a form submission for new accounts",
  "main": "App.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "---",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass": "^0.5.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "index_bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      }, {
          test: /\.scss$/,
          include: path.join(__dirname, "app"),
          loaders: ["style", "css", "sass"]
        },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

My file structure is basically an app folder and a public folder. Inside app you have components / containers / css / scss / utils and inside public is jus the bundle.js and index.html files.

Answer 1

You should not be using an external Sass command with Webpack. You need to put the Sass content in Webpack's dependency graph. To do this, tell Webpack you are using the files, which is done with require() . At the top of your Javascript file for the page needing the style, add

require('./path/to/sass/scss')

In development mode, this will turn your Sass code into Javascript that will inject the built CSS rules into the page. It's strange I know, but it gives you hot reloading of styles. You should also have a separate production build Webpack config using the ExtractTextPlugin to pull the built CSS out into a separate file, and load that file in your production HTML.

Further reading: Webpack: When to Use and Why .

Answer 2

My webpack.config.js file was loading scss and sass twice, changed it to

{
     test: /\.scss$/,
     loader: 'style!css!sass'
}]

by removing

{
     test: /\.scss$/,
     include: path.join(__dirname, "app"),
     loaders: ["style", "css", "sass"]
 },

Now I can include my SASS files in my react components. Now I need to figure out how to access my images inside of my SASS files - seems to toss mass errors =(