Question

这是我的文件...... 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

Answer 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
           ]
        },

Webpack没有改变scss

1 个答案: