使用Webpack的sass-loader不生成CSS

如何使用sass-loader從scss生成css文件並使用express.js將其嵌入到html中。我還使用反應熱裝載機使用Webpack的sass-loader不生成CSS

下面是我的配置文件

var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 
var HTMLWebpackPlugin = require('html-webpack-plugin') 
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({ 
      template: __dirname + '/app/index.html', 
      filename: 'index.html', 
      inject: 'body' 
     }); 


const path = require('path'); 

module.exports = { 

    entry: ['react-hot-loader/patch', 
      'webpack-hot-middleware/client?path=http://localhost:3000/__what', 
      'webpack/hot/only-dev-server', //<- doesn’t reload the browser upon syntax errors. This is recommended for React apps because it keeps the state 
      //'webpack/hot/dev-server', //<- To perform HMR in the browser reloads if HMR update fails. 
      __dirname + '/app/index.js'], 

    context: __dirname, 
    module:{ 
     loaders:[ 
      { 
       test:/\.js$/, 
       exclude: /node_modules/, 
       loader:'babel-loader', 
       query:{ 
        presets:["react","es2015","stage-2"], 
        plugins: ["react-hot-loader/babel"] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       loader: ExtractTextPlugin.extract({fallback:'style-loader' ,use:['css-loader','sass-loader']}), 
       include:path.resolve(__dirname, '/app/scss') 
      } 
     ] 
    }, 
    output:{ 
     filename:'payload-min.js', 
     path: __dirname + '/build', 
     publicPath: __dirname + '/build' 
    }, 
    plugins:[HTMLWebpackPluginConfig , 
      new ExtractTextPlugin(__dirname + '/build/payload.css', { 
            allChunks: true 
      }), 
      new webpack.HotModuleReplacementPlugin(), 
      new webpack.NoEmitOnErrorsPlugin()] 

};

index.js

... 
require('css-loader!sass-loader!./scss/payload.scss');

我從來沒有看到在行動

new ExtractTextPlugin(__dirname + '/build/payload.css', { 
             allChunks: true 
       }),

以下插件執行

的WebPack -d或的WebPack不會產生下payload.css文件/構建

的index.html

<link rel="stylesheet" type="text/css" href="build/payload.css">

我的目錄結構

. 
├── app 
│   ├── actions 
│   │   └── index.js 
│   ├── common 
│   │   └── constants.js 
│   ├── components 
│   │   ├── App.js 
│   │   ├── DetailsSection.js 
│   │   ├── Device.js 
│   │   ├── FirmwareImageDetails.js 
│   │   ├── Menu.js 
│   │   ├── Terminal.js 
│   │   └── ViewJson.js 
│   ├── index2.html 
│   ├── index.html 
│   ├── index.js 
│   ├── reducers 
│   │   ├── index.js 
│   │   └── localStorage.js 
│   └── scss 
│    └── payload.scss 
├── build 
├── mock_payload.json 
├── package.json 
├── package-lock.json 
├── payload_schema.json 
├── README.md 
├── server.js 
├── webpack.config.js 
└── webpack.server.config.js

來源

2017-08-29 Srikan

我不是100％確定的，但我想你可能會通過串聯鏈接裝載器繞過'ExtractTextPlugin'。你可以嘗試只需要你的scss文件，沒有前面的裝載機？例如。 'require（'./scss/load.scss'）;'看看是否有效？ – DMan

我確實嘗試過。在這種情況下，babel試圖解析require，並且我在./app/scss/payload.scss中結束了這個錯誤。模塊解析失敗：/home/ekam/devel/payloadApp/app/scss/payload.scss意外的標記（ 6：5）您可能需要一個合適的加載程序來處理這種文件類型。 | *這些大部分都是從Base繼承的，但我想更改一些。 | */ |身體{ |顏色：＃333; | } @ ./app/index.js 36：0-30 @ multi react-hot-loader/patch webpack-hot-middleware/client？path = http：// localhost：3000/__ what webpack/hot/only- dev-server ./app/index.js – Srikan

問題是與

include:path.resolve(__dirname, '/app/scss')

在加載程序中刪除此行生成的t他的CSS文件。

來源

2017-08-31 23:53:44 Srikan

使用Webpack的sass-loader不生成CSS

回答

相關問題