求解一个Webpack打包生成用SCSS转换为CSS的问题

中原一点点 2016-08-23 06:03:37
var webpack = require('webpack');
var path = require("path");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
//插件项
plugins: [commonsPlugin,new ExtractTextPlugin("/css/[name].css")],
//页面入口文件配置
//entry: ['./src/index.js','./src/index2.js'],
entry: {
index : ['./src/index.js'],//,'./src/index.scss'
index2 :'./src/index2.js',
//font : './src/font.scss'
},
//入口文件输出配置
output: {
//path: path.join(__dirname, './builder'),
path: './builder',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
//{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' },
//{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', "css!sass")},
//{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
/*
resolve: {
root: './src', //绝对路径
extensions: ['', '.js11', '.json22', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}*/
};


按这个配置,我现在配合react,预生成js都没问题了。

现在有想法想把css也抽出来生成文件。用的是scss格式的。按网上说的
var ExtractTextPlugin = require("extract-text-webpack-plugin");
配了这段插件。

然后loaders里面用{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', "css!sass")},
来输入到指定目录new ExtractTextPlugin("/css/[name].css")中

但是现在问题来了,什么都输出不了。
然后查了一下,发现要在entry里面配上
entry: {
index : ['./src/index.js','./src/index.scss'],
index2 :'./src/index2.js',
font : './src/font.scss'
},
就能生成对应的css样式文件了。

可是问题又来了,在生成css样式文件的同时,因为
output: {
path: './builder',
filename: '[name].js'
},
的存在,同样也会生成一个毫无意义的同名的js文件。

一个两个还好点,多个的话很麻烦。所以想请问一下各位大神有谁知道怎么解决这个问题么?
...全文
1123 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
往昔忆流年 2017-02-14
  • 打赏
  • 举报
回复
我也遇到了同样的问题,怎么办啊楼主
往昔忆流年 2017-02-14
  • 打赏
  • 举报
回复
你好,我解决了这个问题。 解析scss的时候不用把他加到文件入口里面。只要在制定的那个入口文件中import 你的scss文件就可以了。
电子时钟设计是一个基于单片机的综合性电子项目,涵盖硬件设计、软件设计、模块代码编写以及运行展示等多个环节。以下是该项目的详细分析与知识点总结: 电子时钟设计是一项课程设计任务,目标是开发一个功能完善的电子时钟系统。该系统以单片机为核心控制器,具备时间显示、设置和控制等功能,旨在满足用户的日常使用需求。 硬件设计的核心是系统方案原理图,它明确了系统的整体架构以及各组件之间的连接关系。外设设计方面,键盘输入模块和数码管显示模块是关键部分。键盘输入模块的工作原理包括键盘扫描、按键识别以及状态机控制等环节;数码管显示模块的工作原理则涉及数码管的驱动、显示控制和状态机控制等内容。 软件设计的核心是项目软件系统总架构图,它详细介绍了系统的软件框架,涵盖单片机编程、键盘输入模块流程图与代码、数码管显示模块流程图与代码等方面。顺序图则展示了软件的运行流程,包括系统初始化、键盘输入处理、显示控制和状态机控制等环节。 模块代码是系统各模块功能的具体实现。例如,键盘输入模块的代码实现了键盘扫描、按键识别和状态机控制等功能;数码管显示模块的代码实现了数码管驱动、显示控制和状态机控制等功能。 运行展示是项目的最终成果呈现环节,展示了电子时钟的实际运行效果,包括时间的准确显示、便捷的设置操作以及稳定的控制功能等。 单片机原理:掌握单片机的架构、指令系统和编程方法。 Proteus仿真:熟悉Proteus仿真原理、仿真环境及仿真操作。 C语言编程:理解C语言的语法、数据类型、控制结构、函数和数组等基础知识。 电子时钟设计:了解电子时钟的工作原理、设计方法和实现技术。 硬件设计:掌握硬件设计的基本原理、方法和工具。 软件设计:熟悉软件设计的基本原理、方法和工具。 模块代码实现:掌握模块代码的设计、编程和调试技巧。 电子时钟设计项目融合了硬件与软件设计,通过模块代码实现功能,并通过运行展示呈现最终效果。掌握

87,995

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧