Sass 与 webpack 不工作

Question

我正在使用 webpack、react、babel 和 Sass 构建应用程序。我一直试图让 Sass 工作，但它不是在玩球。它没有抛出任何错误，只是似乎没有正确编译，当我在开发工具中检查元素时，它只是在我引用了一个变量的地方显示“无效的属性值”。有什么明显的地方我做错了吗？

我的 app.scss：

@import '../../../node_modules/normalize.css/normalize.css';
@import '../variables.scss';

/*
 * Base styles
 * ========================================================================== */

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    text-align: center;
    margin: 0;
}

p {
    color: $blue;
}

我的变量.scss：

/*
 * Colors
 * ========================================================================== */

$blue: #334c6a;
$yellow: #f6d463;
$white: #ffffff;
$black: #000000;

/*
 * Typography
 * ========================================================================== */

$font-family-base:      'Segoe UI', 'HelveticaNeue-Light', sans-serif;

/*
 * Layout
 * ========================================================================== */

$container-margin: 55px;

Webpack.config：

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build/',
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.png', '.json']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
      rules: [
     {
       test: /\.jsx?$/,
       exclude: /node_modules/,
       loaders: ['react-hot-loader', 'babel-loader']
     },
     {
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'postcss-loader']
     },
     {
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
       loader: 'url-loader?limit=10000',
     },
     {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
     }
   ]
  }
};

包.json：

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "test",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "node-sass": "^4.5.2",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "normalize.css": "^6.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

Answer 1

此配置适用于 webpack 2 和 sass。

    {
      test: /\.s?css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']          
    },

然后在 App.js 文件中

import './app.scss'

完整的 webpack.config

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
   './index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build',
    filename: "bundle.js"
  },

  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'build'),
    publicPath: '/',
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // new webpack.NoErrorsPlugin(), not needed any more
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
    rules: [{
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      },
      {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader' , 'postcss-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }
    ]
  }
};