sass-loader 没有将 SCSS 编译为 CSS，只是使用 SCSS 格式渲染 .CSS

Question

一直想知道为什么我的嵌套属性在所有事情似乎都表明它们应该起作用时却不起作用。查看控制台的“源”选项卡中使用的 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"

Answer 1

好的，我想我是在 class 上学习 Webpack 之后才找到答案的，这确实帮助我更好地理解了它。当我为 manifest.js,、vendor.js 和 app.js 的代码拆分重构我的 webpack.config.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;
}

sass-loader 没有将 SCSS 编译为 CSS，只是使用 SCSS 格式渲染 .CSS

sass-loader is not compiling SCSS to CSS, just renders .CSS with SCSS formatting

css

sass

reactjs

node-sass

webpack