css文件如何设置scss,Webpack - 如何将scss编译成单独的css文件?
2 个答案:
答案 0 :(得分:3)
这是我在尝试将css编译成单独文件时使用的webpack.config.js文件
|-- App
|-- dist
|-- src
|-- css
|-- header.css
|-- sass
|-- img
|-- partials
|-- _variables.scss
|-- main.scss
|--ts
|-- tsconfig.json
|-- user.ts
|-- main.js
|-- app.js
|-- webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCss = new ExtractTextPlugin("css/style.css");
var autoprefixer = (require("autoprefixer"))({ browsers: ['last 2 versions'] });
var precss = require("precss");
var sugarss = require('sugarss');
var colormin = require('postcss-colormin');
var path = require("path");
module.exports = {
entry: {
app: ['./src/sass/main.scss', './src/main.js']
},
//devtool:"source-map",
output:{
filename: "bundle.js",
path: path.resolve(__dirname,"dist"),
publicPath: "/dist/"
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
module:{
loaders:[
{
test:/\.s?(a|c)ss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("css!postcss!sass")
},/*
{
test:/\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader", "postcss-loader","precss")
},*/
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
postcss: function(){
return {
plugins: [ autoprefixer, precss ]
}
}
}
答案 1 :(得分:1)
前提条件
CSS-装载机
节点SASS
SASS装载机
式装载机
提取物的文本的WebPack-插件
$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev
webpack.config.js
这是我的演示webpack.config.js,根据您的项目结构更改路径:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const srcPath = path.join(__dirname, 'src');
const dstPath = path.join(__dirname, 'dst');
const sassLoaders = [
'css-loader?minimize',
'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath
];
module.exports = {
entry: {
client: './src/js/client'
},
module: {
loaders: [
/*README:https://github.com/babel/babel-loader*/
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015'],
cacheDirectory: true
},
plugins: ['transform-runtime']
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
},
{
test: /\.(png|jpg|bmp)$/,
loader: 'url-loader?limit=8192'
}
]
},
output: {
path: dstPath,
filename: '[name].js'
},
plugins: [
new ExtractTextPlugin('[name].min.css')
]
};
css文件如何设置scss,Webpack - 如何将scss编译成单独的css文件?相关推荐
- Creo文件怎么保存为HTML文件,将Creo装配体的每个部件保存成单独的STP格式 | 坐倚北风...
我们在Creo中将装配体保存成STP格式时,默认是将所有的部件保存到一个STP文件中.如果我们希望将所有的部件保存成单独的STP文件,可进行如下设置. 将选项step_export_format的值设 ...
- 将Project的内容导出成单独的XPO文件
AX跟VSS整合的版本管理可以通过创建知识库将当前层的代码全部签入到VSS中,但是如果不是一个团队开发solution,而是针对客户的需求随时做得一些小改动,一般都希望以Project的形式组织代码和 ...
- 将Python源码编译成pyc和pyo文件
一.将python文件编译成pyc和pyo文件 用 python -m py_compile file.py python -m py_compile /root/src/{file1,file2}. ...
- python文件打包成exe是 upx不可用、找不到py文件_使用PyInstaller将Python程序打包成一个单独的exe文件...
1. 安装步骤略过 网上教程多 2. 用cmd进入PyInstaller的目录 然后执行以下命令: python pyinstaller.py -F C:\test.py 以上命令需要把Python目 ...
- 打包成单独的HTML文件,【WEBPACK】分离css单独打包
时间:2018-11-21 00:58:56 这篇文章非常非常早了,webpack4下已经无法用了, 最新可以看这里webpack实战场景系列 CHANGELOG 2018-02-08 14:46:0 ...
- s19文件反编译成c语言,S19文件反编译器使用说明.ppt
S19文件反编译器使用说明 S19 decoder Sep 2008 lzbing Decoder Find decoder.exe in codewarrior installation direc ...
- webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中? - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想. 当前的解决方案 CSS 是无法缓存的,并且还有一个 ...
- 微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信
一.微前端之实践环境变量设置.快照沙箱隔离.代理沙箱隔离.css 样式隔离.父子应用间通信和子应用间通信 微前端环境变量设置,如下所示: 在 micro 下的 sandbox 中 performScr ...
- OSS内文件如何设置为无时间限制的下载链接
OSS内文件如何设置为无时间限制的下载链接 想把一些文件上传到OSS里,把OSS当网盘用,做成分享的下载链接 发现获取的链接都是有时间限制的 有没有取消这个时间限制的功能或者方法 请将object ...
最新文章
- C语言 条件编译详解
- 105、Replicated Mode VS Global Mode (Swarm12)
- 安装mysqldb python接口时找不到mysql_config
- RabbitMq入门以及使用教程
- ++ 优化 频繁new_Java性能优化的50个细节,我必须分享给你!
- Asp.net C# 遍历Excel中的表格名称
- Linux如何进行GPIO读写操作的?
- clone() 操作系统实验
- 使用spring session+redis技术,解决负载均衡下的session共享问题
- 【电子技术】【2019.03】【含源码】低成本转子动力学数据采集系统的设计
- PageAdmin CMS网站建设教程:自定义字段如何关联栏目表
- 串口拓展测试方法及步骤--信而泰TeleATT测试软件实操
- 抽样技术---分层随机抽样
- MySQL安全分析:缓解MySQL零日漏洞
- 为什么说 HashMap 是无序的
- IRIS平台部署手册及基本操作
- 智能雷达感应模组应用,让监控更加智能化,雷达存在感应助力安防技术发展
- 内存屏障与volatile(C语言版)
- 到底是为什么而读书?一名武汉大学毕业生的反思
- rpc服务器打开文档,“RPC服务器不可用”解决办法