无法使用 `sass-loader` 内联样式

Posted 2023-02-22

【中文标题】无法使用 `sass-loader` 内联样式

【英文标题】：Unable to inline styles with `sass-loader`

【发布时间】：2018-08-29 20:36:36

【问题描述】：

我有一个项目设置，我使用ExtractTextPlugin 创建一个 CSS 文件。我正在尝试使用style-loader、css-loader 和sass-loader 将样式注入到页面中创建一个开发Webpack 配置。

据我所知，默认行为是将样式注入 <style /> 标记，我已经删除了 ExtractTextPlugin 的所有痕迹，但它仍然不想注入样式。

有人知道什么可能导致样式丢失吗？我的 Webpack 配置如下。

配置：

const webpack = require('webpack')

module.exports = config => Object.assign(, 
  module: 
    loaders: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      ,
      
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      
    ]
  ,
  plugins: [
    new webpack.SourceMapDevToolPlugin(
      filename: 'bundle.js.map'
    ),
    new webpack.DefinePlugin(
      'process.env.NODE_ENV': JSON.stringify('development')
    )
  ]
, config)

调用：

module.exports = require('../../dev')(
  name: 'Onboarding',
  entry: './src/apps/components/Onboarding/index.js'
)

【问题讨论】：

你的目标是什么？将 CSS 放在构建中还是作为单独的文件？

在捆绑包中。我已经让它在单独的文件中工作，但它对开发来说太慢了

你的开发速度慢是什么？

构建时间很慢

你检查过这个问题吗？ github.com/webpack/webpack/issues/3329

【参考方案1】：

我可以通过重写我的大部分 Webpack 配置来让它工作。我已经尝试过下面的css-loader 选项，所以我不确定为什么它们现在有效，但以前无效。

这是我的新开发者专用配置：

const webpack = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = config => 
  const  out, libraryTarget, name = 'main'  = config
  const filename = `$name.js`

  delete config.out

  return Object.assign(, 
    output: 
      path: path.resolve(__dirname, '../../../' + out),
      filename,
      libraryTarget,
      publicPath: '/assets/js/'
    ,
    devtool: 'source-map',
    module: 
      loaders: [
        
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        ,
        
          test: /\.scss$/,
          use: [
            'style-loader',
            
              loader: 'css-loader',
              query: 
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]_[local]_[hash:base64:5]'
              
            ,
            'sass-loader']
        
      ]
    ,
    plugins: [
      new HTMLWebpackPlugin(
        title: 'App Name',
        filename: '../../index.html',
        template: './test-lambda/template-dev.html',
        inject: 'body'
      ),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.SourceMapDevToolPlugin(
        filename: `$filename.map`
      ),
      new webpack.DefinePlugin(
        'process.env.NODE_ENV': JSON.stringify('development')
      )
    ]
  , config)