web-dev-qa-db-ja.com

私のJSでそれらを必要とせずにwebpackでsass / less / cssを構築できますか？

現在、webpackで正常にビルドされているいくつかの反応コンポーネントとsassがあります。また、gulpタスクでcssにビルドするメインのsassファイルもあります。

これらのテクノロジの1つだけを使用したいのですが、sassをcssにコンパイルするだけで、エントリファイル内のsassに関連するrequireはありませんか？

これはWebpackExtractTextPluginを使用しようとする例です

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アセットは次のようになります。

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

...
javascriptcssreactjssasswebpack
26
ex-zac-tly

私は@bebrawの助けを借りてこれを解決しました

彼のコメントで述べたように、ExtractTextPluginを使用すると、webpackはoutput.filenameにパターンが続くダミーのJavaScriptファイルを作成します。 ExtractTextPluginの出力ファイルをoutput.filenameの名前とまったく同じに設定していたため、javascriptファイルのみを出力していました。 output.filenameとExtractTextPluginの出力ファイル名が異なることを確認することで、sassをcssに美しくロードできました。

これが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")
  ]
5
ex-zac-tly