sass-loader 不会将 SCSS 编译为 CSS，只是使用 SCSS 格式呈现 .CSS答案

【问题标题】：sass-loader is not compiling SCSS to CSS, just renders .CSS with SCSS formattingsass-loader 不会将 SCSS 编译为 CSS，只是使用 SCSS 格式呈现 .CSS
【发布时间】：2018-07-01 14:50:16
【问题描述】：

一直想知道为什么我的嵌套属性不起作用，而一切似乎都表明它们应该起作用。查看控制台的 Sources 选项卡中使用的 CSS，它将 SCSS 格式化为 CSS。所以像这样的东西在 SCSS 中就这样离开了：

th {
    background-color: #d9d9d9;
    border: 1px solid black !important;
    font-size: 11px;
    padding-bottom: 50%;
    text-align: center;
    vertical-align: middle !important;

    .table-section-heading {
        text-align: left !important;
    }
}

而不是把它变成：

th .table-section-heading {
    ...
}

无论如何，不知道我做错了什么，但这是我的webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  context: __dirname,

  entry: [
    '../react/index'  
  ],

  output: {
      path: path.resolve('./src/assets/bundles/'),
      filename: './js/[name]-[hash].js'
  },

  plugins: [
    new BundleTracker({filename: './src/config/webpack-stats.json'}),
    new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
  ],

  module: {
    loaders: [
      // {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=img/[name].[ext]"},
      { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      },
      {
        test: /\.json$/,
        loader: ['json-loader'] 
      },
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'] 
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })      
      },   
    ],
  },

  resolve: {
    extensions: ['*', '.js', '.jsx', '.gif']
  }
}

使用以下相关依赖项：

"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.6.2",
"webpack": "^3.5.3",
"webpack-bundle-tracker": "^0.2.0"

【问题讨论】：

标签： css reactjs webpack sass node-sass

【解决方案1】：

好的，我想我是在上了一门关于 Webpack 的课程后才找到答案的，这确实帮助我更好地理解了它。当我重构我的webpack.config.js 以对manifest.js,、vendor.js 和app.js 进行代码拆分时，我想我会重新讨论这个问题。

在documentation 中有：

    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
    })

对此进行了修改，现在它似乎可以按预期工作（嗯，除了它缩进了嵌套属性）。

/* main.scss */
td {
    font-size: 11px;
    text-align: center;
    border-top: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;

    .test {
        font-size: 15px;
    }
}

转换为 CSS：

td {
  font-size: 11px;
  text-align: center;
  border-top: none !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important; 
}

td .test {
  font-size: 15px;
}

【讨论】：