Webpack不會變換scss

這裏是我的文件... webpack編譯得很好，但沒有選擇樣式更改。我遵循了2個教程，只是想在構建基本開發流程的基礎上使用webpack進行樣式設計。Webpack不會變換scss

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

來源

2017-08-27 user5773369

採用進口 './stylesheets/main.scss'，而不是要求（' ./樣式表/ main.scss' ）; –

沒有工作。請注意我正在使用webpack-dev-server。這裏是我的package.json： – user5773369

添加包括：APP_DIR到您的sass加載器 – Miguel

試圖用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 
      ] 
     },

來源

2017-08-28 07:12:08

以上都不起作用。請參閱我的編輯到我原來的問題。謝謝 – user5773369

Webpack不會變換scss

回答

相關問題