Javascript 如何使用webpack.config.js文件捆绑所有.scss文件？_Javascript_Css_Sass_Webpack

Javascript 如何使用webpack.config.js文件捆绑所有.scss文件？

javascript css sass webpack

Javascript 如何使用webpack.config.js文件捆绑所有.scss文件？,javascript,css,sass,webpack,Javascript,Css,Sass,Webpack,我正在尝试设置我的webpack.config.js文件，以便将我的sas捆绑在一起。我有一个文件src/sass/index.scss，它定义了项目中其他地方使用的变量。例如，我的src/components/css/button.scss文件使用另一个文件中定义的$my special green变量有没有办法设置我的webpack.config.js文件以获取我的/src目录，递归查找所有.scss文件，然后将它们捆绑到一个bundle.css文件中？理想情况下，我希望这一切都发生在we

我正在尝试设置我的

webpack.config.js

文件，以便将我的sas捆绑在一起。我有一个文件

src/sass/index.scss

，它定义了项目中其他地方使用的变量。例如，我的

src/components/css/button.scss

文件使用另一个文件中定义的

$my special green

变量

有没有办法设置我的

webpack.config.js

文件以获取我的

/src

目录，递归查找所有

.scss

文件，然后将它们捆绑到一个

bundle.css

文件中？理想情况下，我希望这一切都发生在

webpack.config.js

文件中

我可以在我的

entry.js

文件中要求使用单个

.scss

文件，这是可行的，但如果可能的话，我希望避免这样做。另外，我知道我可以将一个

.scss

文件导入另一个文件，但如果可能的话，我也希望避免这样做

如果我确实需要我的

entry.js

文件中的

.scss

文件，它们确实会被放入我正在使用

ExtractTextPlugin

创建的

public/bundle.css

文件中，但是我想知道是否有一种方法可以基于这个

webpack.config.js

文件实现这一点

我认为使用

sassLoader: {
    includePaths: [path.resolve(path.join(__dirname, "src"))]
  }

也许是解决办法，但这并不能真正改变我的情况。我想它真的只是确保在javascript文件中需要

.scss

文件时包含这些路径

我当前的

webpack.config.js

文件看起来像

var path              = require('path');
var webpack           = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var SRC_PATH    = path.join(__dirname, 'src');
var BUILD_PATH  = path.join(__dirname, 'dist');
var HTML_OPTS   = {
  filename: 'index.html',
  title:    'My Page Title',
  inject:   true,
  minify:   { collapseWhitespace: true, },
  templateContent: "<!DOCTYPE html>" +
    "<html>" +
      "<head>" +
        "<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>" +
        "<meta charset='utf-8'/>" +
        "<title>{%= o.htmlWebpackPlugin.options.title %}</title>" +
      "</head>" +
      "<body>" +
      "</body>" +
    "</html>"
};

module.exports = {
  context:  SRC_PATH,
  entry:    [path.join(SRC_PATH, 'entry.js')],
  resolve:  {
    root:       SRC_PATH,
    extensions: ['', '.js', '.jsx']
  },
  output:   {
    path:       BUILD_PATH,
    filename:   'index.js'
  },
  plugins: [
    new HtmlWebpackPlugin(HTML_OPTS),
    new ExtractTextPlugin('public/bundle.css', {
            allChunks: true
        })
  ],
  module:   {
    loaders:  [
      {
        test:     /\.scss$/,
        loader:  ExtractTextPlugin.extract('style', 'css!sass')
      },
      {
        test:     /\.jsx?$/,
        exclude:  /node_modules/,
        loader:   'babel',
        query:
          {
            presets:['react']
          }
      }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(path.join(__dirname, "src"))]
  }
};

var path=require（'path'）；
var webpack=require（'webpack'）；
var HtmlWebpackPlugin=require（'html-webpack-plugin'）；
var ExtractTextPlugin=require（“提取文本网页包插件”）；
var SRC_PATH=PATH.join（_dirname，'SRC'）；
var BUILD_PATH=PATH.join（_dirname，'dist'）；
变量HTML_OPTS={
文件名：“index.html”，
标题：“我的页面标题”，
是的，
缩小：{collapseWhitespace:true，}，
模板内容：“+
"" +
"" +
"" +
"" +
“{%=o.htmlWebpackPlugin.options.title%}”+
"" +
"" +
"" +
""
};
module.exports={
上下文：SRC_路径，
条目：[path.join（SRC_path，'entry.js'）]，
决心：{
根：SRC_路径，
扩展名：[''，'.js'，'.jsx']
},
输出：{
路径：构建路径，
文件名：“index.js”
},
插件：[
新的HtmlWebpackPlugin（HTML_选项），
新ExtractTextPlugin（'public/bundle.css'{
allChunks：对
})
],
模块：{
装载机：[
{
测试：/\.scss$/,，
加载器：ExtractTextPlugin.extract（'style'，'css！sass'））
},
{
测试：/\.jsx？$/,，
排除：/node_模块/，
加载器：“巴贝尔”，
查询：
{
预设：[“反应”]
}
}
]
},
萨斯洛德：{
includePath:[path.resolve（path.join（uu dirname，“src”））]
}
};