Javascript 如何在组件内部使用带有css模块/PostCs的SCS
我不知道如何设置我的网页,以便能够在我的组件中使用scss模块,如: 从“./ComponentStyles.scss”导入样式 到目前为止,我尝试将webpack配置为使用sass加载器和POSTSS加载器,但没有成功:Javascript 如何在组件内部使用带有css模块/PostCs的SCS,javascript,reactjs,webpack,postcss,css-modules,Javascript,Reactjs,Webpack,Postcss,Css Modules,我不知道如何设置我的网页,以便能够在我的组件中使用scss模块,如: 从“./ComponentStyles.scss”导入样式 到目前为止,我尝试将webpack配置为使用sass加载器和POSTSS加载器,但没有成功: { test: /\.scss$/, loaders: [ 'isomorphic-style-loader', 'css-loader?modules&localIdentName=[name]_[local]_[hash
{
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]',
'postcss-loader',
'scss-loader'
]
}
注:由于服务器呈现要求,我使用了一个库来代替样式加载器,在其github页面文档中,他们实际上使用了扩展名为.scss的postcss加载器,但在我的例子中,如果我遵循他们的示例,则不会编译scss。我不得不自己进行一些修补,但最终还是遇到了以下问题 package.json 网页包配置 bootstrap.jsx 对于那些感兴趣的人:这里发生的是bootstrap.jsx是webpack入口点,通过通过相对路径导入原始scss文件,我们告诉webpack在构建过程中包含它 此外,由于我们已经在configuration.scss中为此文件扩展名指定了一个加载程序,webpack能够解析style.scss并从右到左通过定义的加载程序运行它:sass->post css->css 然后,我们使用extract text webpack插件将编译好的CSS从bundle.js中拉出,它通常位于bundle.js中,并将其放置在相对于输出目录的CSS/bundle.CSS位置 此外,在这里使用extract text webpack插件是可选的,因为它只需从bundle.js中提取CSS并将其放在一个单独的文件中,如果使用服务器端呈现,这很好,但我在调试期间也发现它很有帮助,因为我对编译的SCS有一个特定的输出位置 如果您希望看到它的实际应用,下面是一个使用它的小样本:
"autoprefixer": "^6.3.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.8.0",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0"
...
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
...
const config = {
...
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
plugins: [
new ExtractTextPlugin('css/bundle.css'),
],
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
}
]
}
...
};
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import style from './scss/style.scss';
ReactDOM.render(
<App/>,
document.getElementById('my-app')
);