javascript - Webpack - Sass 加载器不编译 Sass
问题描述
我正在尝试将Sass-loader引入现有项目,以便能够在我的 React 组件中使用 Sass。我之前在我自己的样板中成功地设置了这个并且没有任何问题,但由于某种原因,当前配置似乎无法播放。它不会给出任何错误,而是不会对我尝试导入的 .scss 文件执行任何操作。
我可以看到cssLoaders
Webpack 的配置中有一些加载程序可能是罪魁祸首,但我只针对具有规则的 .scss/ .sass 文件
test: /\.s(a|c)ss$/
所以我根本不会想到这会影响它。
我有一个带有通用文件和一个用于开发的 webpack 设置。以下是这两个文件:
webpack.common.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
require('babel-polyfill');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: {
main: ['babel-polyfill', './src/index.js']
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }]
},
{
test: /\.s(a|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
outputPath: 'images/'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
},
plugins: [
new ErrorOverlayPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: 'index.html'
}),
new Dotenv(),
new CleanWebpackPlugin(['dist'])
]
};
这是webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const paths = require('../paths');
module.exports = require('./webpack.config.base')({
bail: false,
devtool: 'cheap-module-eval-source-map',
stats: 'errors-only',
performance: {
hints: false
},
entry: {
main: [
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appPolyfillsJs,
require.resolve('react-error-overlay'),
paths.appIndexJs
]
},
output: {
pathinfo: true,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath)
},
// Load the CSS in a style tag in development
cssLoaders: [
{
loader: require.resolve('style-loader'),
options: {
sourceMap: true
}
},
{
loader: require.resolve('css-loader'),
options: {
modules: false,
sourceMap: true,
importLoaders: 1
}
},
{
loader: require.resolve('postcss-loader'),
options: { sourceMap: true }
}
],
babelQuery: {
cacheDirectory: true
},
plugins: [].concat([
new ProgressBarPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
failOnError: true
})
])
});
我添加到配置中的部分在 webpack.common 中:
{
test: /\.s(a|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
然后我将它导入到模块中,如下所示:
import React, { PureComponent } from 'react';
import './test.scss';
...
谁能发现为什么配置错误?
解决方案
sass-loader 需要node-sass和 webpack 作为peerDependency。
确保安装了node-sass并webpack.dev.js
像这样编辑加载器:
{
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}
推荐阅读
- python - csv 文件的 INSERTION 中格式字符串的参数不足
- python - 你可以在 Django 中将变量分配给下划线吗
- python-3.x - 在第一个元素在特定范围内的元组中查找元组列表中的最小值
- architecture - 用于存储视频数据的关系数据库
- node.js - 尝试连接字符串时出现“非法访问”错误
- r - Unable to read a .txt zipped file with readtext in R
- docker - Web UI 代码和微服务在同一个 monorepo 中?
- c# - 选择其他列表框时取消选择列表框
- c# - 如何在 WPF 应用程序中设置线程的 DPI_AWARENESS_CONTEXT?
- asp.net - WCF MessageContract 的参数未从 SSRS 正确发送