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

前端之家收集整理的这篇文章主要介绍了css – 无法使用`sass-loader`内联样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个项目设置,我使用ExtractTextPlugin来创建一个CSS文件.我正在尝试使用style-loader,css-loader和sass-loader创建一个开发Webpack配置,并将样式注入页面.

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

有谁知道什么可能导致风格丢失?我的Webpack配置如下.

配置:

  1. const webpack = require('webpack')
  2.  
  3. module.exports = config => Object.assign({},{
  4. module: {
  5. loaders: [
  6. {
  7. test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader'
  8. },{
  9. test: /\.scss$/,use: [
  10. 'style-loader','css-loader','sass-loader'
  11. ]
  12. }
  13. ]
  14. },plugins: [
  15. new webpack.SourceMapDevToolPlugin({
  16. filename: 'bundle.js.map'
  17. }),new webpack.DefinePlugin({
  18. 'process.env.NODE_ENV': JSON.stringify('development')
  19. })
  20. ]
  21. },config)

叫:

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

解决方法

我能够通过重写我的大部分Webpack配置来实现它.我已经尝试了下面的css-loader选项,所以我不确定他们为什么现在工作但不是之前.

这是我新的dev-only配置:

  1. const webpack = require('webpack')
  2. const path = require('path')
  3. const HTMLWebpackPlugin = require('html-webpack-plugin')
  4.  
  5. module.exports = config => {
  6. const { out,libraryTarget,name = 'main' } = config
  7. const filename = `${name}.js`
  8.  
  9. delete config.out
  10.  
  11. return Object.assign({},{
  12. output: {
  13. path: path.resolve(__dirname,'../../../' + out),filename,publicPath: '/assets/js/'
  14. },devtool: 'source-map',module: {
  15. loaders: [
  16. {
  17. test: /\.js$/,loader: 'babel-loader'
  18. },{
  19. test: /\.scss$/,use: [
  20. 'style-loader',{
  21. loader: 'css-loader',query: {
  22. importLoaders: 1,modules: true,localIdentName: '[name]_[local]_[hash:base64:5]'
  23. }
  24. },'sass-loader']
  25. }
  26. ]
  27. },plugins: [
  28. new HTMLWebpackPlugin({
  29. title: 'App Name',filename: '../../index.html',template: './test-lambda/template-dev.html',inject: 'body'
  30. }),new webpack.HotModuleReplacementPlugin(),new webpack.SourceMapDevToolPlugin({
  31. filename: `${filename}.map`
  32. }),new webpack.DefinePlugin({
  33. 'process.env.NODE_ENV': JSON.stringify('development')
  34. })
  35. ]
  36. },config)
  37. }

猜你在找的CSS相关文章