繁体   English   中英

webpack 4-“正常”,格式正确的CSS输出可能吗?

webpack 4 - “normal”, nicely formatted CSS output possible?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我尝试将webpack 4用于一个简单的任务:生成一个SCSS框架可能会产生并输出为格式正确的CSS文件的所有可能的CSS。 gulp设置在5分钟内完成了工作:

// Gulp
let gulp = require('gulp')
let gulpScss = require('gulp-sass')
let postcss = require("gulp-postcss")
let autoprefixer = require("autoprefixer")

function style() {
  return (
    gulp
      .src('src/scss/main.scss')
      .pipe(gulpScss())
      .on("error", gulpScss.logError)
      .pipe(postcss([autoprefixer()]))
      .pipe(gulp.dest('dist'))
  );
}
exports.style = style;

..。我仍在努力使用webpack 4:

// webpack 4
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const autoprefixer = require('autoprefixer')

const isDevelopment = process.env.NODE_ENV !== 'production'
const rootPath = path.resolve(__dirname, '../')

module.exports = {
  entry: { bundle: './src/app.js' },
  output: { [...] },
  module: {
    rules: [ {
        test: /\.js$/,
        [...]
      }, {
        test: /\.(scss|css)$/,
        use: [
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader', 'sass-loader']
          })
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ [...] }),
    new ExtractTextPlugin("inuitcss.css")
  ]
}

// NPM
"build": "webpack -p --progress --mode production --config ./config/build.js"

我还在这里讨论了关于stackoverflow的一些帖子,即: Sass loader和webpack 4等,但是它们都使用mini-css-extract-plugin或extract-text-plugin。

问题是:我确实取得了结果,这不是问题; 问题是,它们都被缩小了。

我的问题:是否完全有可能使用webpack 4生成非最小化的CSS输出,可能带有诸如“嵌套”之类的漂亮配置选项?

问题暂未有回复.您可以查看右边的相关问题.
1 webpack输出CSS文件

我试图让webpack为我的少而不是内联样式输出一个css文件。 我一直在使用extract-text-webpack-plugin 。 我已经根据文档进行了设置,并查看了关于stackoverflow的类似问题,但无法弄清楚为什么我下面的webpack配置文件不输出文件或在index. ...

2 webpack不输出css

情况 我有一个webpack设置,其中有一条规则,它使用extract-text-webpack-plugin和sass-loader从.ts文件中提取CSS和/或SASS。 我将SCSS文件导入一个单独的.ts文件中 问题 CSS文件应位于输出文件夹( dist )中 ...

3 Webpack不输出CSS的Webpack模块

当我运行webpack时,我的SASS入口点通过来自全局的动态入口点进行馈送。 webpack输出(通过MiniCSSExtractPlugin)为每个SASS入口点生成所需的缩小的CSS版本,但也为SASS生成Webpack模块文件。 无论如何,有没有不输出Webpack Module C ...

4 webpack不输出css文件

我现在确实在奋斗几个小时,以使一个简单的应用程序与webpack一起运行。 我不知道自己在做什么错。 请帮忙! 我正在构建react-redux-router应用程序+打字稿。 我有一个自定义的CSS文件,我想在我的项目中使用。 这是我的webpack.config文件: ...

5 如何输出独立的CSS使用webpack?

我有两个入口文件:pc.js和wap.js,它们需要相同的js(a.js); 现在a.js需要两个css文件(a.css,b.css); 在webpack 2中,如何输出两个css文件(a.css => pc.css,b.css => wap.css)? ...

6 Webpack错误:CSS没有正确的Mimetype

我已经尝试了所有可能的方法,但是我在努力使用webpack。 我需要一个配置,该配置从pugfiles生成html文件,从scss生成css。 我的问题是,起初CSS没有正确的Mime类型。 通过修复layout.pug中的链接,Mimetype错误消失了,但是webpack崩溃了,并说找不到css ...

7 Xhtml代码在CSS中无法正常工作,如何正确格式化以使工作正常?

我只是在学习CSS,我不确定为什么事物的顺序会影响事物在我的页面上的工作方式。 顶部元素始终显示,而其他元素不工作。 有时,当我点东西时,两件事不会起作用,但通常一件事会起作用,而另外两件事却不会。 在这些元素之外,我的标题首先位于正文中。 然后我有无序列表,然后是有序列表。 我正在尝 ...

8 以正确的格式输出日期

我有一个通过表格以dd / MM / yyyy格式输入到数据库的日期。 然后将其以某种日历样式(即MMM和dd)输出到另一页上。 在英国填写此表格后,例如,日期是4月3日,一切正常。 但是,如果在美国填写,则日期显示为3月4日。 所以我的问题是,如何确保在输出日期时将其读取为 ...

9 格式正确的BigDecimal输出

请帮助我设置BigDecimal的输出。 例如:我需要输出长度小于8位的数字,例如:“ 12345678”,如果大于,则输出:“1,2345Е+ 9”。 方法 工作不正常: 下面的代码产生下一个输出: 57657657657453646587980887663654 ...

10 Webpack手表输出格式

现在我有一个webpack,以便它检查我的代码库并在检测到更改时重新编译。 我不喜欢cmd上的输出,所以我在webpack.config的plugins数组中添加了一个函数。 该函数控制台记录编译编号和编译完成的时间。 我想知道是否有人知道如何更改cmd输出的颜色只是为了更容易确保我的代码 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM