Question

想知道为什么我的嵌套属性在所有东西似乎都表明它们应该存在时不起作用。查看控制台的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"

Answer 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;
}

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

1 个答案: