Webpack nimmt keine Änderungen an scss an

Hier sind meine Dateien ... webpack kompiliert gut, aber nicht Änderungen übernehmen. Ich habe 2 Tutorials verfolgt und möchte nur Styling arbeiten mit Webpack in einem grundlegenden Entwicklungsprozess.Webpack nimmt keine Änderungen an scss an

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'; 
}

Komponenten/alle:

@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>

Vielen Dank, wenn Sie helfen können. . .

EDIT:

ich alle unten stehenden Empfehlungen aufgenommen haben und noch kein Glück bekommen webpack css zu holen. Hier ist meine modifizierte webpack config:

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

Quelle

2017-08-27 user5773369

Verwendung import './stylesheets/main.scss' zu machen statt erfordern (' ./ Sheets/main.scss'); –

Hat nicht funktioniert. Bitte beachten Sie, dass ich webpack-dev-server benutze. Hier ist meine package.json: – user5773369

Fügen Sie hinzu: APP_DIR zu Ihrem Sass Loader – Miguel

Versuchen Sie, den Einsatz von 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 
      ] 
     },

Quelle

2017-08-28 07:12:08

Keines der oben genannten funktioniert. Bitte sehen Sie meine Bearbeitung zu meiner ursprünglichen Frage. Vielen Dank – user5773369

Webpack nimmt keine Änderungen an scss an

Antwort

Verwandte Themen