无法将多个scss文件提取到一个css文件

似乎我不知道如何将多个.scss文件提取到一个.css文件。建立我的/ dist文件夹后，只会产生.js文件。我遵循了许多指南，但其中没有一个适用。这里是我的webpack.config.js无法将多个scss文件提取到一个css文件

module.exports = { 
    entry: { 
     index: ["./src/app/index.ts"], 
     background: ["./src/background/background.ts"] 
    }, 
    watch: true, 
    watchOptions: { 
     aggregateTimeout: 300, 
     ignored: /node_modules/ 
    }, 
    output: { 
     filename: "[name].js", 
     path: path.resolve(__dirname, "dist") 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts?$/, 
       loader: "awesome-typescript-loader", 
       exclude: [/\/node_modules\//] 
      }, { 
       test: /\.html$/, 
       loader: "html-loader" 
      }, { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        //resolve-url-loader may be chained before sass-loader if necessary 
        use: ['css-loader', 'sass-loader'] 
       }) 
      } 
     ] 
    }, 
    plugins: [ 
     new CopyWebpackPlugin([ 
      { 
       from: "manifest.json", 
       to: "./" 
      }, { 
       from: "./node_modules/jquery/dist/jquery.js", 
       to: "./" 
      } 
     ]), 
     new ExtractTextPlugin('style.css'), 
     new CleanWebpackPlugin("dist"), 
    ], 
    resolve: { 
     extensions: [".ts", ".js"] 
    } 
};

@edit我有最新的模块：

的WebPack：2.4.1
青菜装载机：6.0.3
提取文本-webpack-plugin：2.1.0

来源

2017-04-26 Humberd

你试试这种方式吗？
1）创建一个包含所有你需要SCSS进口styles.scss：

2）创建文件：全styles.js：

import style1 from "./styles/styles.scss";

3）添加所有-styles.js视为您的切入点：

entry: { 
 
    index: ["./src/app/index.ts"], 
 
    background: ["./src/background/background.ts"], 
 
    styles: ["./src/all-styles.js"] 
 
},

来源

2017-04-26 22:54:54

谢谢，它的工作原理！但是与'styles.css'一起，我的'/ dist'目录中还创建了'styles.js'文件。你知道如何删除该js文件吗？ – Humberd

webpack是一个js-bundler，这就是你也有js文件的方式。在我的项目中，我命名了所有样式文件，如* .style.css，并将* .style.js添加到.gitignore文件。所以我在我的仓库里没有垃圾 –

哦，没关系。我刚刚添加了导入语句到我的索引文件，并且一切按预期工作 – Humberd

无法将多个scss文件提取到一个css文件

回答

相关问题