Webpack : 동일한 소스에서 여러 CSS 파일 생성

Question

코드를 복제하지 않고 대체 스타일 시트를 사용하려면 webpack 2를 사용하여 동일한 SCSS 소스에서 2 개의 다른 CSS 파일을 생성하려고합니다. 나는 성공적으로 하나의 주석을 달아서 두 시트를 따로 생성했지만, 동시에 그것들을 생성하는 방법을 알 수는 없다. (관련성 단축) 내 웹팩 설정은 다음과 같습니다

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const webpack = require('webpack'); 
const path = require('path'); 

const ExtractLightCss = new ExtractTextPlugin("app-light.css") 
const ExtractDarkCss = new ExtractTextPlugin("app-dark.css") 

module.exports = { 
    ... 
    module: { 
     rules: [ 
      { 
       test: /\.scss?$/, 
       use: ExtractLightCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: true;"}} ]}) 
      }, 
      { 
       test: /\.scss$/, 
       use: ExtractDarkCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: false;"}} ]}) 
      }, 
      ... 
     ] 
    },  
    plugins: [ 
     ExtractLightCss, 
     ExtractDarkCss 
    ] 
}; 

내가, 내가 오류가 그것에서 규칙의 두 세트를 실행하는 것처럼 보이게

ERROR in ./~/css-loader!./~/sass-loader?{"data":"$light: true;"}!./~/extract-text-webpack-plugin/loader.js?{"id":2,"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?{"data":"$light: false;"}!./styles/[filename].scss 

라고 말하는이 설정에 웹팩 실행하려고하면 같은 시간, 다른 하나를 실행하는 것보다.

이렇게 할 방법이 있습니까?

Answer 1

나는 더 많은 연구를했으며, 직접적인 방법이 없다고 보았습니다. (나는 훌륭한 자원으로 https://survivejs.com/webpack/foreword/을 찾았습니다.) 그러나 나는 해결 방법을 찾았다. 필자는 '구성 구성'을 사용하여 모듈 규칙을 만들어 복제를 방지 한 다음 두 구성을 모두 내 보내어 webpack에서 동시에 구성 할 수 있도록했습니다. 단순화 된 예는 다음과 같습니다

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const merge = require('webpack-merge'); 

const deploymentSass = (light) => { 
    return { 
     module: { 
      rules: [ 
       { 
        test: /\.scss?$/, 
        use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", { 
         loader: "sass-loader", 
         options: { 
          data: light ? "$light: true;" : "$light: false;", 
         }} ]}), 
       }, 
      ], 
     }, 
     plugins: [ 
      new ExtractTextPlugin(`app-${light ? 'light' : 'dark'}.css`), 
     ], 
    }; 
}; 

const lightTheme = merge(qaConfig,      
        deploymentSass(true)); 

const darkTheme = merge(qaConfig, 
        deploymentSass(false)); 

module.exports = [ 
    lightTheme, 
    darkTheme, 
] 

가이 빌드를 포함하기 때문에 이것은 완벽한 해결책은 아니지만, 그것은 나를