Webpack 3에서 스타일러스를 사용하는 방법은 무엇입니까?

Question

현재 Webpack의 현재 버전에서 작동하는 Stylus CSS 전처리기를 얻으려고 애 쓰고 있습니다. 여기에 내가 시도 한 내용은 다음과 같습니다

webpack.config.js :

var path = require("path"); 
module.exports = { 
    entry: './src/app.js', 
    output: { 
     filename: 'mwe.js', 
     path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       include: /src/ 
      }, 
      { 
       test: /\.styl$/, 
       include: /src/, 
       use: [ 
       'style-loader', 
       { 
        loader: 'css-loader', 
        options: { 
        modules: true, 
        localIdentName: '[name]__[local]___[hash:base64:5]' 
        } 
       }, 
       'stylus-loader' 
       ], 
      }, 
     ] 
    } 
}; 

package.json : 나는 app.js과 style.styl 아주 간단한이

{ 
    ... 
    "devDependencies": { 
    "css-loader": "^0.28.7", 
    "style-loader": "^0.19.0", 
    "stylus": "^0.54.5", 
    "stylus-loader": "^3.0.1", 
    "webpack": "^3.8.1" 
    } 
} 

/src의 내부.

Webpack을 실행하면 /dist/mwe.js가 예상대로 생성되지만 스타일러스 파일에서 CSS 파일이 생성 될 것으로 예상됩니다. 내가 여기서 무엇을 놓치고 있니?

Answer 1

style-loader을 사용하는 경우 Webpack은 .css 개의 파일을 방출하지 않습니다. CSS 파일을 얻으려면 ExtractTextPlugin을 사용해야합니다.

Answer 2

Panya에서 언급했듯이 ExtractTextPlugin을 먼저 설치해야합니다.

1. npm i --save-dev extract-text-webpack-plugin
2. 그런 다음이 당신이

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const extractPlugin = new ExtractTextPlugin({ 
    filename: '../css/style.css', 
    allChunks: true, 
}); 

const config = { 
    … 
    module: { 
    rules: [ 
     { 
     test: /\.(css|styl)$/, 
     use: extractPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader', 
       options: {importLoaders: 1, sourceMap: true} 
      }, 
      { 
       loader: 'stylus-loader', 
       options: { sourceMap: true }, 
      }, 
      ] 
     }) 
     } 
    ] 
    }, 
    plugins: [extractPlugin] 
    … 
} 

을 webpack.config.js 포함