我之前通过导入它来完成这项工作
import sass from '../scss/application.scss';
这是错误的导入类型吗?
现在它给我以下错误......
./app/components/Landing.js中的错误找不到模块:错误:无法解析'/ Users / sam / Desktop / talkwith / talkingwith''style''BREAKING CHANGE:不再允许省略' - 使用加载器时的loader'后缀 . 您需要指定'style-loader'而不是'style' . @ ./app/components/Landing.js 13:19-54 @ ./app/App.js @ multi(webpack)-dev-server / client?http:// localhost:3333 ./app/App.js
不知道我现在如何在我的组件中使用SASS .
编辑:我的webpack文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/App.js'
],
output: {
path: __dirname + '/public',
filename: "bundle.js"
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
inline:true,
contentBase: './public',
port: 3333
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}]
}
};
3 回答
我不是100%确定你正在使用什么sass库 . 对我来说真正有用的是使用node-sass库和sass-loader . https://github.com/jtangelder/sass-loader使用带有css-loader和style-loader的sass-loader也是一种好习惯 . (如下面的例子)
使用sass-loader你的webpack.config.js看起来像这样 .
将webpack.config.js更新到最重要的是你需要做的是在你的入口点js文件中需要你的.scss文件,在你的情况下App.js
以为我会发布我最终使用的解决方案
尝试
并在webpack配置中,