我一直在查看文档并查看其他人的问题,但我找不到如何将我的所有sass编译成简单的css文件并指定目录的简单答案我希望生成的css文件输出到。
快速上下文: 我有一个带有样式表目录的公共目录和一个构建目录。 webpack将应用程序编译为build,我希望将sass编译style.css放入stylesheets目录。
这是我的公共目录的屏幕截图:
我希望能够在我的webpack.config.js中执行类似的操作(仅为简洁起见显示相关代码):
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
// To be called in plugins:
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css');
内部模块加载器:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
},
在插件中:
plugins: [
.
.
.
cssOutput,
],
我希望能够在位于公共目录的index.html文件中使用此行访问输出文件:
<link rel="stylesheet" href="/stylesheets/style.css" />
我目前正在使用gulp进行此操作并且工作正常,我只是尝试将所有内容转换为webpack。任何帮助将不胜感激!
答案 0 :(得分:2)
原来你可以像这样设置输出文件:
const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true });
我做了noob错误忘记添加:
require('_scss/style.scss');
在我的index.jsx文件中。
对于遇到此问题的任何人,我仍然遇到字体和图片问题,因此在webpack.config.js中的模块加载器中我必须添加:
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'file',
},
并且因为这会将所有内容输出到我的构建目录中,所以我只是更改了css以输出构建目录中的所有内容以防止路径错误。我改成了这个:
const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true });
希望这可以帮助遇到此类问题的其他人!
答案 1 :(得分:1)
为我工作::
webpack.config.js
module.exports = {
entry: ['./src/app.ts', './src/sass/style.scss'],
module:{
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src', 'src/class')]
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '/css/[name].css'
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader?-url'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
],
include: [path.resolve(__dirname, 'src/sass')]
}
]
},
output: {
filename: 'js/app.js',
path: path.resolve(__dirname, 'public')
}
}
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {}
}
}
package.json
{
"name": "tsscript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"nov": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.5",
"css": "^3.0.0",
"css-loader": "^3.6.0",
"extract-loader": "^5.1.0",
"postcss-loader": "^3.0.0",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.0",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}
}
目录捕捉:
答案 2 :(得分:0)
答案 3 :(得分:0)
最近的解决方案,可以使用mini-css-extract-plugin
、css-loader
和sass-loader
。 mini-css-extract-plugin
可以为每个包含 CSS 的 JS 文件创建一个 CSS 文件。
安装依赖:
npm i -D mini-css-extract-plugin css-loader sass-loader
例如,包含样式的主 JS 文件是 ./src/index.js
:
...
import './src/style.scss';
...
配置webpack.config.js
:
...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...
entry: {
main: './src/index.js',
},
plugins: [
new MiniCssExtractPlugin(),
],
...
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
...
]
},
resolve: {
modules: ["node_modules", path.resolve(__dirname, "src")],
extensions: ['.js', '.scss', ...]
}
}
然后,你可以查看你的输出目录,会有main.css
。插件将默认名称设置为 [name].css
(条目名称)。