我可以在webpack中构建sass / less / css而不需要在我的JS中吗？ [英] Can I build sass/less/css in webpack without requiring them in my JS?

问题描述

我目前有一些反应组件和用webpack成功构建的sass。我还有一个主要的sass文件，它使用gulp任务构建到css。

I currently have some react components & sass that are being built with webpack successfully. I also have a main sass file that builds to css with a gulp task.

我只想使用其中一种技术，是否有可能只是编译sass到css而没有对条目文件中的sass的相关要求？

I'd like to only have to use one of these technologies, is it possible to just compile sass to css without an associated require to the sass in an entry file?

这是一个尝试使用WebpackExtractTextPlugin的例子

Here's an example trying to use WebpackExtractTextPlugin

webpack.config.js

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name]")
  ]

运行webpack后，style.css资产如下所示：

after running webpack, the style.css asset looks like this:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...

推荐答案

我在@bebraw的帮助下解决了这个问题

I solved this with the help of @bebraw

正如他在评论中所说，webpack将创建一个虚拟javascript文件，后面是output.filename中的模式ExtractTextPlugin。因为我将ExtractTextPlugin的输出文件设置为与output.filename中的名称完全相同，所以它只输出了javascript文件。通过确保output.filename和ExtractTextPlugin输出文件名的名称不同，我能够很好地将我的sass加载到css。

As he stated in his comment, webpack will create a dummy javascript file as followed by the pattern in your output.filename when using ExtractTextPlugin. Because I was setting the output file of the ExtractTextPlugin to exactly the same as the name in the output.filename, it was only outputting the javascript file. By ensuring that the name of the output.filename and ExtractTextPlugin output filename are different, I was able to load my sass to css beautifully.

这是webpack的最后一个例子.config.js

Here's the final example of the webpack.config.js

entry_object[build_css + "style"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]

这篇关于我可以在webpack中构建sass / less / css而不需要在我的JS中吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！