使用webpack提取Scss
Scss extraction with webpack
我正试图使用ExtractTextPlugin将我的scs提取并转换为css,并将其与client.min.js一起移动到src
文件夹中,但目前在构建webpack.config.js文件时遇到以下问题:
中的错误/scss/styles.js找不到模块:错误:无法解析C:''Users''ajoku''Desktop''Web Projects''learn2node''http''scss中的模块"main.scss"@/scss/styles.js 3:0-20
我的webpack.config.js文件:
"use strict";
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractSCSS = new ExtractTextPlugin('./scss/main.scss',{allChunks: true});
module.exports = {
context: path.join(__dirname, "http"),
devtool: debug ? "inline-sourcemap" : null,
entry: {
js:"./react/client.js",
scss: "./scss/styles.js",},
module: {
loaders: [
{
test: /'.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}},
{test: /'.scss$/i, loader: ExtractTextPlugin.extract('css!scss')},
]
},
output: {
path: "./src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
plugins: [
new ExtractTextPlugin('main.css', {
allChunks: true
})
]
};
我的styles.js文件
require("main.scss");
我的scs文件与styles.js文件一起位于http/scss
中是什么原因导致了问题?谢谢你抽出时间。
这可以通过sass加载程序和提取文本webpack插件实现
webpack.config
module.exports = {
module: {
{
test: /'.scss$/,
include: path.resolve(__dirname, 'http/scss'),
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]-[local]!autoprefixer!sass')
}
}
plugins: [
new ExtractTextPlugin('[name]-[hash].min.css')
]
}
package.json
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"css-loader": "^0.23.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"extract-text-webpack-plugin": "^0.9.1",
"style-loader": "^0.13.0"
}
相关文章:
- 在数据提取完成之前进行页面渲染
- 如何在Javascript中从字符串中提取某些单词
- RegEx JavaScript:数字后的符号提取
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- Regex提取URL返回数组的一部分;未定义”;
- 如何提取“;href"最近列表项中的属性值
- 使用时刻.js从日期时间中提取时间
- 通过javascript从会话中提取用户名
- HTML页面如何提取通过表单传递的参数
- 是否可以自动拉取“随机”;标签“;从一长串文本中提取
- innerHTML的子字符串可以在初始调用时提取吗
- 如何使用phonegap从安卓设备中提取联系人的字母顺序
- 如何从特定页面中提取php变量值
- 从字符串中提取年份的Javascript正则表达式
- 通过Ember颜色选择器更新SCSS变量
- 如何使用JavaScript提取此url的一部分
- 如何更改_variable.scss中变量的值
- 使用BeautifulSoup从Javascript中提取文本以获得关注者数量
- 使用javascript从字符串中提取浮点数
- 使用webpack提取Scss