Webpack 不接受对 scss 的更改答案

【问题标题】：Webpack not picking up changess to scssWebpack 不接受对 scss 的更改
【发布时间】：2017-08-27 21:11:02
【问题描述】：

这是我的文件... webpack 可以正常编译，但没有进行样式更改。我已经学习了 2 个教程，只是想在基本的开发构建过程中使用 webpack 进行样式设置。

webpack.config.js：

var webpack = require('webpack')
var path = require('path')

var BUILD_DIR = path.resolve(__dirname + '/build') 
var APP_DIR = path.resolve(__dirname + '/app') 

var config = {
  entry: APP_DIR + '/index.jsx'
, output: {
    path: BUILD_DIR
  , filename: 'bundle.js'
  , publicPath: '/'
  }
, resolve: {
    extensions: ['.js', '.jsx']  
  }
, devtool: 'source-map'
, devServer: {
    inline: true
  , contentBase: BUILD_DIR
  , port: 3333 
  }
, module: {
    rules: [
      {
        test: /\.jsx?/
      , include: APP_DIR
      , loader: 'babel-loader'
      , query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.scss$/,
        use: [//{
               // loader: "style-loader" // creates style nodes from JS strings
            //}, {
              {  loader: "css-loader" // translates CSS into CommonJS
           }, {
                 loader: "sass-loader" // compiles Sass to CSS
            }]
      }
    ]
  }
}

module.exports = config

index.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from './reducers/index.js'

require('./stylesheets/main.scss');

// Create a store
let store = createStore(reducer);

import App from './components/App.jsx'

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider> , document.getElementById('app'));

main.scss：

.app {
  @import 'components/all';
}

组件/全部：

@import 'product';

_product.scss

.pr-product {
  width: percentage(1/7);
  float: left;
  text-align: center;
  padding: 0.5rem;
  font-size:2rem;
  font-weight: 400;
  border-radius: 0.25rem;
  transition: background-color 0.25s ease-in-out;

  color: pink;
  background-color: orange;

  // Variants
  &.past, &.future {
    opacity: 0.5;
  }

  // States
  &:hover {
    cursor: pointer;
    background-color: rgba(orange, 0.3);
  }
}

product.jsx：

import React from 'react'

let Product = ({id, name, cost, handleClick}) => (
    <div className='pr-product'>
      {name} ${cost} <button onClick={() => handleClick(id)}>Add to cart</button>
    </div>

)

export default Product

index.html:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Made no difference: <link rel="stylesheet" href='../app/stylesheets/main.scss'> -->
</head>
<body>
  <div id='app' class='app'></div>
  <script src='bundle.js'></script>
</body>
</html>

如果你能提供帮助，谢谢。 . .

编辑：

我已经采纳了以下所有建议，但仍然无法让 webpack 获得 css。这是我修改后的 webpack 配置：

var webpack = require('webpack')
var path = require('path')

var BUILD_DIR = path.resolve(__dirname + '/build') 
var APP_DIR = path.resolve(__dirname + '/app')
var CSS_DIR = path.resolve(__dirname + '/app/stylesheets') 

var config = {
  entry: APP_DIR + '/index.jsx'
, output: {
    path: BUILD_DIR
  , filename: 'bundle.js'
  , publicPath: '/'
  }
, resolve: {
    extensions: ['.js', '.jsx', '.scss']  
  }
, devtool: 'source-map'
, devServer: {
    inline: true
  , contentBase: BUILD_DIR
  , port: 3333 
  }
, module: {
    rules: [
      {
        test: /\.jsx?/
      , include: APP_DIR
      , loader: 'babel-loader'
      , query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
            test: /(\.scss)$/,
            include: CSS_DIR,
            use: [{loader: 'css-hot-loader'}, 
                 {loader: "style-loader" }, // creates style nodes from JS strings   
                 {loader: "css-loader"},  // translates CSS into CommonJS
                 {loader: "sass-loader?" +  JSON.stringify({ includePaths: [ CSS_DIR ], sourceMap : true })} // compiles Sass to CSS
           ]
        }
    ]
  }
}

module.exports = config

【问题讨论】：

使用 import './stylesheets/main.scss' 而不是 require('./stylesheets/main.scss');
没用。请注意我正在使用 webpack-dev-server。这是我的 package.json：
添加 include: APP_DIR 到你的 sass 加载器
查看这个答案 > stackoverflow.com/questions/42677929/…

标签： reactjs webpack sass redux

【解决方案1】：

尝试使用css-hot-loader

        {
            test: /(\.scss)$/,
            use: [{loader: 'css-hot-loader'}, 
                 {loader: "style-loader"}, // creates style nodes from JS strings   
                 {loader: "css-loader"},  // translates CSS into CommonJS
                 {loader: "sass-loader"} // compiles Sass to CSS
           ]
        },

【讨论】：

以上都不起作用。请查看我对原始问题的编辑。谢谢